2013-03-13 18 views
5

io uso Chosen plugin jQuery e ho notato che max_selected_options non funziona:scelti max_selected_options di plugin

Il codice è questo:

<!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> 

Non capisco che cosa è corretto per il mio codice. Questa riga:

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

dovrebbe limitare il numero massimo di selezioni consentite. Ma non funziona. Posso ancora selezionare qualsiasi numero di elementi. Ho notato che anche l'evento che dovrebbe essere licenziato sul caso viene raggiunto il numero massimo di elementi selezionati non lo fa fuoco:

$(".chzn-select").bind("liszt:maxselected", function() { alert("a"); }); 

Non ho alcun tipo di errore nel codice?

E un'altra domanda: come posso aggiungere funzionalità di ricerca al mio elenco, come la casella di ricerca che appare sul primo esempio nella pagina dei plugin?

Grazie.

risposta

11

Si chiama due volte il metodo chosen(), ed è per questo che si ottiene problemi:

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

Rimuovere il primo e funziona. Il tuo codice JS dovrebbe essere:

$(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"); }); 
}); 
+0

e se fosse necessario modificare le opzioni max_selected_options? questo significa che non funzionerà, dalla tua spiegazione –

+1

@CharlesOkwuagwu Il 'choice'plugin non sembra avere la possibilità di cambiare le impostazioni dopo init, quindi penso che l'unica opzione è distruggere il plugin e reinizializzarlo:' $ (".chzn-select"). chosen ("destroy"); 'then' $ (". chzn-select"). chosen ({max_selected_options: 5}); ' –

Problemi correlati