时间戳

首页 > 解决方案 > 如何使用 javascript 添加可搜索的下拉列表

javascript - 如何使用 javascript 添加可搜索的下拉列表

问题描述

所以我有这段代码将下拉列表中的项目添加到文本区域，由于下拉列表包含多个清单，我希望有人可以告诉我如何修改代码，以便它创建一个可搜索的下拉列表。即使我查看了这个答案Searchable select option并添加了 select2 但没有任何反应

<head>
<title>Jquery multiple select with checkboxes using bootstrap-multiselect.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
</head>
<body>
    <!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> -->

    <hr />
    <strong>Columns :</strong>
    <select id = "multichecks" multiple = "multiple" onclick = "test();" ></select>

    <input type="text" id ="textbox"/>
    <hr />
    <script type="text/javascript">
      var options =
      [
        {
          "text"  : "Option 1",
          "value" : "Value 1"
        },
        {
          "text"  : "Option 2",
          "value" : "Value 2"
        },
        {
          "text"  : "Option 3",
          "value" : "Value 3"
        },
      ];
      var selectBox = document.getElementById('multichecks');

      for(var i = 0, l = options.length; i < l; i++){
        var option = options[i];
        selectBox.options.add( new Option(option.text, option.value, option.selected) );
      }
      $(document).ready(function() {
          $('#multichecks').select2();
          $('#multichecks').multiselect({
            onChange: function test(){
            document.getElementById('textbox').value = $('#multichecks').val().join(',')               
            }
          });
      });
    </script>

标签： javascriptjavajquery

解决方案

在enableFiltering: true引导多选中有。

我在文档（http://davidstutz.de/bootstrap-multiselect/#configuration-options-filterBehavior）中找到了这段代码

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            enableFiltering: true,
            includeSelectAllOption: true
        });
    });
</script>

如果这是您使用的插件和版本。

推荐阅读