如何使用 javascript 添加可搜索的下拉菜单答案

【问题标题】：how to add searchable dropdown using javascript如何使用 javascript 添加可搜索的下拉菜单
【发布时间】：2019-12-07 02:18:33
【问题描述】：

所以我有这段代码将下拉列表中的项目添加到文本区域，因为下拉列表包含多个清单，我希望有人能告诉我如何修改代码，以便它创建一个可搜索的下拉菜单。即使我查看了这个答案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>

【问题讨论】：

标签： javascript java jquery

【解决方案1】：

    $(document).ready(function() { 
    $('#multichecks').select2(); 
    $('#multichecks').multiselect({ 
    enableFiltering: true,
 enableCaseInsensitiveFiltering: true,
 filterPlaceholder: 'Search for something...',
    onChange: function test(){ 
    document.getElementById('textbox').value = $('#multichecks').val().join(',') 
    } 
    }); 
    });

您只需添加 enableFiltering:true 和 enablecaseInsensitiveFiltering:true 以及 filterPlaceholder，多选提供此功能。

【讨论】：

感谢@Hiren，因为它首先显示 None Selected 如何将它发送到其他 ENTER

【解决方案2】：

在 bootstrap-multiselect 中有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>

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

【讨论】：