使用bootstrap-select完成可搜索的多选下拉列表
2017-04-04 13:30
771 查看
1.引用bootstrap-select及相关文件
2.页面上放一个select和HiddenField,HiddenField用于传递select的值
4.后台获取选中值
效果图:
1 <link href='<%= Application["scriptURL"] %>JS/bootstrap.min.css' type="text/css" rel="stylesheet" /> 2 <link href="<%# Application["scriptURL"] %>bootstrap-select.css" type="text/css" rel="stylesheet" /> 3 <script type="text/javascript" src="<%# Application["scriptURL"] %>jquery-1.9.1.min.js "></script> 4 <script type="text/javascript" src="<%# Application["scriptURL"] %>JS/bootstrap.min.js"></script> 5 <script type="text/javascript" src="<%# Application["scriptURL"] %>bootstrap-select.js"></script>
2.页面上放一个select和HiddenField,HiddenField用于传递select的值
1 <div style="width:220px;"> 2 <select id="selASSIGNED_TO" class="selectpicker show-tick form-control" multiple onchange="selectChange()" data-live-search="true"></select> 3 <asp:HiddenField runat="server" ID="hidASSIGNED_TO"></asp:HiddenField> 4 </div>
3.加载数据,当select值变化时将选中值传给HiddenField
1 <script type="text/javascript"> 2 function GetASSIGNED_TO_DATA() { 3 $.post('HttpHandler.ashx', { type: "getassignedtodata"}, function (data) { 4 var items = eval('(' + data + ')'); 5 if (items.length > 1) { 6 $("#selASSIGNED_TO").empty(); 7 $.each(items, function (i, item) { 8 $("#selASSIGNED_TO").append("<option value=" + item["ID"] + ">" + item["USER_NAME"] + "</option>"); 9 }); 10 var str = $("#<%=hidASSIGNED_TO.ClientID%>").val(); 11 var arr = str.split(','); 12 $('#selASSIGNED_TO').selectpicker('val', arr); 13 $('#selASSIGNED_TO').selectpicker('refresh'); 14 } 15 else { 16 return false; 17 } 18 }); 19 } 20 function selectChange() { 21 $("#<%=hidASSIGNED_TO.ClientID%>").val($('#selASSIGNED_TO').val()); 22 } 23 $(function () { 24 GetASSIGNED_TO_DATA(); 25 }); 26 </script>
4.后台获取选中值
string sASSIGNED_TO = hidASSIGNED_TO.Value;
效果图:
![](https://images2015.cnblogs.com/blog/609064/201704/609064-20170404132914269-1671860141.png)
相关文章推荐
- Jquery多选下拉列表插件jquery multiselect功能介绍及使用
- bootstrap下拉列表chzn-select默选中多选
- 可搜索、可多选的下拉列表控件使用
- 下拉列表插件bootstrap-select使用实例
- Bootstrap可多选、搜索的下拉列表
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- 使用bootstrap-select实现下拉菜单的模糊搜索,支持单选和多选功能
- jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- bootstrap-select 多选下拉框使用教程
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- (转)基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- Metronic_下拉列表Select2插件的使用
- 使用标签创建下拉列表和多选列表框
- bootstrap的多选下拉框的使用
- jquery multiselect, 多选下拉框的使用
- Bootstrap 字体图标,下拉列表组件的使用