bootstrap-multiselect多选框

多选框代码:

<b>IP:b><select id="Ip" name="Ip" class="multiselect" style="height:40px;overflow-y:auto" multiple="">
          <option value="null">--选择IP--option>

控制多选框在页面加载时就将多选框动态加载
代码如下:

jQuery(function($){
        $('.multiselect').multiselect({
         maxHeight: 200,
         enableFiltering: true,
         enableHTML: true,
         includeSelectAllOption: true,
         buttonClass: 'btn btn-white btn-primary',
         templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text">span>  <b class="fa fa-caret-down">b>button>',
            ul: '<ul class="multiselect-container dropdown-menu">ul>',
            filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search">i>span><input class="form-control multiselect-search" id="mutiltext" type="text">div>li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2">i>button>span>',
            li: '<li><a tabindex="0"><label>label>a>li>',
            divider: '<li class="multiselect-item divider">li>',
            liGroup: '<li class="multiselect-item multiselect-group"><label>label>li>'
         }
         });
    });

动态加载options
代码如下:

function get_ips()
  {
      var appname = $("#App").val();
      var HJ = $("#HJ").val();
      var data = {"appname":appname,"HJ":HJ}
      $.ajax({
                url:'/get_ips',
                type:'get',
                data:data,
                dataType:'json',
                success:function(res){
                    ips = res["ips"];
                    $("#Ip").empty();
                    for (var i=0; ivar str = " + ips[i] + "";
                        $("#Ip").append(str);
                        $("#Ip").multiselect('rebuild');//这句尤为重要
                    }
                }
      });
}

你可能感兴趣的:(Web前端)