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