選擇jQuery插件-在Multiselect中限制所選選項

Question

我使用的是Choosen jquery插件，我想限制multiselect中的選定選項。有一個建議的解決方案$(".chosen-select").chosen({max_selected_options: 5}); 但這對我不起作用！

這是我的js文件：

$(document).ready(function(){
// .....
$(".chosen-select").chosen({max_selected_options: 5});
//.....
});

這是php文件：

<em>Country</em>
<select data-placeholder="Choose your country..." id="mycountry" class="chosen-select" multiple style="width:400px;" tabindex="4">
                <option value=""></option>
                <?php  
// Data from dataabse
?>
</select>

Answer 1

此代碼對我有用-

 $(".demo-chosen-select").chosen({
    max_selected_options:3, //Max select limit 
    display_selected_options:true, 
    placeholder_text_multiple:"Select some options", 
    no_results_text:"Results not found", 
    enable_split_word_search:true, 
    search_contains:false, 
    display_disabled_options:true, 
    single_backstroke_delete:false,
    width:"200px", 
    inherit_select_classes:true 
 });

而已..

Answer 2

在安裝Chosen時，您必須在網頁中添加以下行：

<script type="text/javascript">
             var config = {
               '.chosen-select'           : {},
               '.chosen-select-deselect'  : {allow_single_deselect:true},
               '.chosen-select-no-single' : {disable_search_threshold:10},
               '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
               '.chosen-select-width'     : {width:"95%"}
             }
             for (var selector in config) {
               $(selector).chosen(config[selector]);
             }

並且您必須使用這些行來配置所選的插件。 例如，如果您要限制多選中五個項目的選定選項。 隨時用新的'.chosen-select' : {max_selected_options: 5},更新此行'.chosen-select' : {}, '.chosen-select' : {max_selected_options: 5},

這就是全部

Answer 3

上述解決方案需要在初始化時傳遞一個選項。 因此，您需要設置全局限制，或者分別初始化頁面上的每個不同的限制選擇。

我將以下if塊添加到selected.jquery.min.js中（對於選擇v1.3.0）的組件

 Chosen.prototype.on_ready = function () { if(this.form_field.getAttribute('data-limit')){ this.max_selected_options = this.form_field.getAttribute('data-limit'); } return this.form_field_jq.trigger("chosen:ready", {chosen: this}) 

這將從select中讀取data-limit屬性，並在初始化時替換或創建max_selected_option。