使用bootstrap-select完成可搜索的多选下拉列表

1.引用bootstrap-select及相关文件

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;

效果图：