选择的下拉搜索不适用于动态填充的选项答案

【问题标题】：Chosen dropdown search is not working for dynamically populated options选择的下拉搜索不适用于动态填充的选项
【发布时间】：2016-05-20 06:34:37
【问题描述】：

我正在使用选择下拉菜单并动态填充选项。即使我无法输入文本，下拉列表中的搜索也不起作用，但当下拉选项为静态时它工作正常。请帮忙。

<select id="test" class="chosen-select"> 
    <option>Select1</option> 
</select> 

var div2=[]; 
div2.push("<option value='1'>ALL1</option>"); 
div2.push("<option value='2'>ALL2</option>"); 
div2.push("<option value='3'>ALL3</option>"); 
div2.push("<option value='4'>ALL4</option>"); 
div2.push("<option value='5'>ALL5</option>"); 
$("#test").html(div2.join('')); 

$("#test").trigger("chosen:updated");

【问题讨论】：

var div2=[]; div2.push(""); div2.push(""); div2.push(""); div2.push(""); div2.push(""); $("#test").html(div2.join('')); $("#test").trigger("chosen:updated");

标签： javascript jquery jquery-chosen

【解决方案1】：

确保在动态填充下拉列表后调用.chosen()。

这是一个小提琴https://jsfiddle.net/npzs2bt7/

编辑 1：

您可能在调用trigger("chosen:updated") 之前没有在下拉列表中调用chosen()。

更新小提琴https://jsfiddle.net/npzs2bt7/1/

编辑 2：

使用Jquery 1.9.0、Chosen.Jquery 1.1.0

将其复制到 html 文件 (chosentest.html) 中并尝试。

<html>
    <head>
        <title>chosen demo</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
        <style type="text/css">
            #test
            {
              width:100px;
            }
        </style>
    </head>
    <body>
        <select id="test" class="chosen-select"> 
          <option>Select1</option> 
        </select>
        <button class="btn">Click to see selected value</button>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //first call chosen()
                $("#test").chosen();

                 var div2=[]; 
                 div2.push("<option value='1'>ALL1</option>"); 
                 div2.push("<option value='2'>ALL2</option>"); 
                 div2.push("<option value='3'>ALL3</option>"); 
                 div2.push("<option value='4'>ALL4</option>"); 
                 div2.push("<option value='5'>ALL5</option>"); 
                 $("#test").html(div2.join('')); 

                 //this will bind the updates
                 $("#test").trigger("chosen:updated"); 

                 //text button to alert selected value from dropdown
                 $(".btn").click(function(){
                    alert($("#test").val());
                }); 
            });
        </script>
    </body>
</html>

【讨论】：

这是我的示例代码 var div2=[]; div2.push(""); div2.push(""); div2.push(""); div2.push(""); div2.push(""); $("#test").html(div2.join('')); $("#test").trigger("chosen:updated");
嘿@Sridhar 它工作正常。根据您的 cmets，我已经更新了小提琴。检查更新的答案。
您好 Prashanth，感谢您的快速回复。仍然没有运气......我正在使用Chosen v1.1.0......你使用的是相同的版本吗？不确定是版本问题
嗨@Sridhar，您一定遗漏了一些东西。选中“编辑 2”。我正在从 CDN 加载 jquery 和 selected.jquery。它适用于 v1.1.0
嗨 Prashanth，当我使用选择的 v1.5.1 但不适用于选择的 v1.1.0 时，它对我来说工作正常.....谢谢