选择的下拉搜索不适用于动态填充的选项
Chosen dropdown search is not working for dynamically populated options
我正在使用选择下拉菜单并动态填充选项。即使我无法输入文本,下拉列表中的搜索也不起作用,但当下拉选项为静态时,它可以正常工作。请帮忙。
<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");
确保在动态填充下拉列表后调用 .chosen()
。
这是一个fiddlehttps://jsfiddle.net/npzs2bt7/
编辑 1:
可能您在调用 trigger("chosen:updated")
之前没有在下拉列表中调用 chosen()
。
已更新 fiddle 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>
我正在使用选择下拉菜单并动态填充选项。即使我无法输入文本,下拉列表中的搜索也不起作用,但当下拉选项为静态时,它可以正常工作。请帮忙。
<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");
确保在动态填充下拉列表后调用 .chosen()
。
这是一个fiddlehttps://jsfiddle.net/npzs2bt7/
编辑 1:
可能您在调用 trigger("chosen:updated")
之前没有在下拉列表中调用 chosen()
。
已更新 fiddle 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>