2013-08-26 12 views
5

Sto tentando di concatenare selezioni con Chosen e Chained ma non sono sicuro se sto implementando .chosen(). Change() correttamente o se l'errore che sto ottenendo è un bug.Chaining seleziona con Chosen

Ecco quello che ho:

<select id="Inputfield_date" name="date" data-placeholder="Select event date"> 
<option value=""></option> 
<option value="WA">WA</option> 
<option value="QLD">QLD</option> 
<option value="VIC">VIC</option> 
<option value="NSW">NSW</option> 
<option value="SA">SA</option> 
</select> 

<select id="Inputfield_code" name="code" data-placeholder="Response code"> 
<option value=""></option> 
<option value="601" class="WA">601</option> 
<option value="602" class="WA">602</option> 
<option value="402" class="QLD">402</option> 
<option value="403" class="QLD">403</option> 
<option value="301" class="VIC">301</option> 
<option value="302" class="VIC">302</option> 
<option value="201" class="NSW">201</option> 
<option value="203" class="NSW">203</option> 
<option value="501" class="SA">501</option> 
</select> 

$('#Inputfield_date').chosen().change(function() { 
    $("#Inputfield_code").chained("#Inputfield_date"); 
}); 

che mi dà Uncaught RangeError: Dimensione massima stack di chiamate superato.

MODIFICA: Ora devo anche nascondere/mostrare un altro campo se viene scelta un'opzione particolare e non sono sicuro di quale sia l'approccio corretto per quello.

+0

questo è un esempio su SO http://stackoverflow.com/questions/18441118/retrieve-values-from-dynamically-added-selects-using-jquery-in-php –

+0

Non vedo l'Eletto utilizzato in questo esempio. – Tyssen

risposta

7

Utilizzando l'esempio della documentazione Concatenata, ho creato uno example on jsfiddle.

ed è in realtà abbastanza semplice, basta inizializzare Chained e Scelto come si farebbe normalmente, e quindi attivare l'evento chosen:updated se uno dei seleziona i cambiamenti:

var selects = $('#Inputfield_code, #Inputfield_date'); 
$('#Inputfield_code').chained('#Inputfield_date'); 
selects.chosen({width: '300px'}) 

selects.on('change', function(){ 
    selects.trigger('chosen:updated'); 
}); 

EDIT:

Per la tua seconda domanda ho aggiornato un po 'il violino: http://jsfiddle.net/koenpunt/Fzh9G/2/

Scelti inviati che l'opzione è selezionata insieme all'evento di modifica, quindi controllando se un'opzione specifica n è selezionato è semplice:

$('#series').on('change', function(event, data){ 
    // First check if data exists, because if the change event 
    // isn't triggered by Chosen `data` is undefined 
    if(data){ 
     if(data.selected == 'a5'){ 
      $('#submit').hide(); 
     }else{ 
      $('#submit').show(); 
     } 
    } 
}); 

Come si noterà, se si seleziona 'Audi' e 'A5' il pulsante scomparirà.

+0

Fantastico, grazie. :) – Tyssen