Javascript 所选下拉搜索不适用于动态填充的选项_Javascript_Jquery_Jquery Chosen

Javascript 所选下拉搜索不适用于动态填充的选项

javascript jquery

Javascript 所选下拉搜索不适用于动态填充的选项,javascript,jquery,jquery-chosen,Javascript,Jquery,Jquery Chosen,我正在使用选择的下拉列表并动态填充选项。即使我无法输入文本，在下拉列表中搜索也不起作用，但当下拉选项为静态时，搜索效果良好。请帮忙 <select id="test" class="chosen-select"> <option>Select1</option> </select> var div2=[]; div2.push("<option value='1'>ALL1</option>"); div

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

<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");


选择1
var div2=[]；
第2部分：推送（“全部1”）；
第2部分：推动（“全部2”）；
第2部分：推动（“全部3”）；
第2部分：推动（“全部4”）；
第2部分：推送（“全部5”）；
$（“#test”）.html（div2.join（“”））；
$（“#测试”）.trigger（“已选择：已更新”）；

确保在动态填充下拉列表后调用

.selected（）

这是一把小提琴

编辑1:

在调用

trigger（“selected:updated”）

之前，您可能没有在下拉列表中调用

selected（）

更新小提琴

编辑2:

使用

Jquery 1.9.0

，选择

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>


精选演示
#试验
{
宽度：100px；
}
选择1
单击以查看选定的值
$（文档）.ready（函数（）{
//选择的第一个呼叫（）
$（“#测试”）.selected（）；
var div2=[]；
第2部分：推送（“全部1”）；
第2部分：推动（“全部2”）；
第2部分：推动（“全部3”）；
第2部分：推动（“全部4”）；
第2部分：推送（“全部5”）；
$（“#test”）.html（div2.join（“”））；
//这将绑定更新
$（“#测试”）.trigger（“已选择：已更新”）；
//文本按钮，用于从下拉列表中警告所选值
$（“.btn”）。单击（函数（）{
警报（$（“#测试”）.val（）；
}); 
});

Select1 var div2=[]；第2部分：推送（“全部1”）；第2部分：推动（“全部2”）；第2部分：推动（“全部3”）；第2部分：推动（“全部4”）；第2部分：推送（“全部5”）$（“#test”）.html（div2.join（“”））$（“#测试”）。触发器（“已选择：已更新”）；这是我的示例代码Select1 var div2=[]；第2部分：推送（“全部1”）；第2部分：推动（“全部2”）；第2部分：推动（“全部3”）；第2部分：推动（“全部4”）；第2部分：推送（“全部5”）$（“#test”）.html（div2.join（“”））$（“#测试”）。触发器（“已选择：已更新”）；嘿@Sridhar它工作得很好。根据你的评论，我已经更新了提琴。检查更新后的答案。嗨，Prashanth，谢谢你的快速回复。仍然没有运气…我使用的是精选的v1.1.0…您使用的是相同的版本吗？不确定这是由于版本issueHi@Sridhar造成的，您一定缺少了什么。选中“编辑2”。我正在从CDN加载jquery并选择.jquery。它在v1.1.0Hi Prashanth上运行良好，当我使用Selected v1.5.1时，它对我来说运行良好，但不适用于Selected v1.1.0…..谢谢