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> &nbsp;<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; i<ips.length; i++)
                    {
                        var str = "<option>" + ips[i] + "</option>";
                        $("#Ip").append(str);
                        $("#Ip").multiselect('rebuild');//这句尤为重要
                    }
                }
      });
}

猜你喜欢

转载自blog.csdn.net/M________123/article/details/81812809