已選擇的jQuery插件 - 限制Multiselect中的選定選項

Question

我正在使用選擇jquery插件，我想限制多選中的選定選項。有一個建議的解決方案$(".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

安裝時選的，你必須在你添加這些行網頁：

<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' : {},：'.chosen-select' : {max_selected_options: 5},

這是所有

Answer 2

此代碼對我的作品 -

$(".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 3

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

我添加以下如果塊中chosen.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})

這將從選擇讀出的數據限制屬性和在初始化時替換或創建max_selected_option。