jquery-plugins - 选择插件max_selected_options

标签 jquery-plugins jquery-chosen

我使用Chosen jQuery插件,但我注意到 max_selected_options 无法正常工作:

代码是这样的:

<!doctype html> 
<html lang="en"> 
<head>
    <link rel="stylesheet" href="chosen/chosen.css" />
</head>
<body>

<select id="assets" data-placeholder="Choose assets" class="chzn-select" multiple style="width:350px;" tabindex="4">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
    <option value="f">f</option>
    <option value="g">g</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript"> 


    $(document).ready(function(){
        $(".chzn-select").chosen();
        $(".chzn-select-deselect").chosen({allow_single_deselect:true});
        $('.chzn-select').chosen({ max_selected_options: 3 });
        $(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });
        $(".chzn-select").chosen().change( function () { alert("a"); } );
    });

</script>
</body>
</html>

我不明白我的代码有什么不对。这行:
$('.chzn-select').chosen({ max_selected_options: 3 });

应该限制​​允许选择的最大数量。但这是行不通的。我仍然可以选择任意数量的项目。
我注意到,在达到所选项目的最大数量的情况下,应该触发的事件也不会触发:
$(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });

我的代码有错误吗?

还有一个问题:如何将搜索功能添加到列表中,例如出现在插件页面上第一个示例中的搜索框?

谢谢。

最佳答案

您两次调用chosen()方法,这就是您遇到问题的原因:

$(".chzn-select").chosen();
$('.chzn-select').chosen({ max_selected_options: 3 });

删除第一个,它可以工作。您的JS代码应为:
$(document).ready(function(){
    $(".chzn-select-deselect").chosen({allow_single_deselect:true});
    $(".chzn-select").chosen({ max_selected_options: 3 });
    $(".chzn-select").bind("chosen:maxselected", function () { alert("max elements selected"); });
    $(".chzn-select").chosen().change( function () { alert("change"); } );
});

关于jquery-plugins - 选择插件max_selected_options,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15382875/

相关文章:

javascript - 在 PHP 中的 AJAX post 上获取空值

javascript - 使用 serialize() 定位特定表单

javascript - JQuery:表单验证 - 没有得到任何结果

php - 如何从选择的 Jquery 中提取数组输出中的多个值

javascript - 选择在 chrome 上工作,但不在 firefox/IE 上工作

javascript - Jscrollpane z-index 问题

jQuery 表单插件在 FireFox 中响应不佳

javascript - Jquery 小部件的问题

javascript - 如何将 jQuery 事件处理程序附加到 YouTube 电影?

javascript - 使用jquery在div中添加输入字段后,表单在回车时提交