multiselect多选框实现

来源：互联网发布：dnf卢克减防算法编辑：程序博客网时间：2024/04/28 12:49

1.效果图

2.依赖文件

jquery-ui.min.js jquery.multiselect.js jquery.js jquery.multiselect.css jquery-ui.css

3.html

<select id="keywordIds" name="keywordIds" multiple="multiple"  placeholder="采集对象" class="form-control" value="dfgdfgd"   data-bind="value:'gfhgdfgf',foreach:keywordIdsOptions()"> <option data-bind="value:keywordName,text:keywordName"></option></select><input type="hidden" id="keywordIdsData" />

4. js

$("#keywordIds").multiselect({    header: false,    height: 200,    minWidth: 200,selectedList: 100,//预设值最多显示10被选中项    hide: ["explode", 500],    noneSelectedText: '选择',    close: function(){      var values= $("#keywordIds").val();  $("#keywordIdsData").val(values);}    });

5. 初始化multiselect 设置默认选中值方法

$('#keywordIds option').each(function(i,content){                    if($.inArray($.trim(content.value),d)>=0){                        this.selected=true;                         }                     });                     $("#keywordIds").multiselect('refresh');

6. 获取选中值得方法

$(".ui-multiselect:nth-child(2)").text().trim().split(',');

0 0