Mettre à jour le contenu Liste déroulante via Jquery

Question

Je suis aux prises avec ce qui suit et je ne suis même pas sûr que ce soit possible.

J'ai, au départ, deux menus déroulants. Menu un avec les fournisseurs et (actuellement) un deuxième pull down avec toutes les tailles de photos qui sont dans la base de données. Où je veux aller est que lors de la sélection d'un fournisseur, le deuxième menu déroulant change avec l'option fournie par ce fournisseur. Jusqu'à présent, rien de difficile à utiliser Jquery et utiliser la sortie pour mettre à jour le deuxième menu déroulant.

Maintenant vient la partie difficile. J'utilise la deuxième liste déroulante pour insérer leurs informations. Donc, le deuxième menu déroulant, pourrait être une douzaine d'entre eux, sont tous les mêmes. J'utilise un script JS pour copier la ligne de la table du formulaire. Comme un ID doit être unique, ces pull-down n'ont pas d'ID.

Est-il encore possible de mettre à jour tous ces 'seconds' menus déroulants lors du changement du premier menu déroulant? Et si oui, comment est-ce possible?

Le premier menu déroulant qui devrait déclencher la mise à jour des listes déroulantes ci-dessous:

<select name="leverancier" id="leveranciers"> 
    <option value="1">Supplier 1</option> 
    <option value="2">Supplier 2</option> 
</select> 

Cette partie se reproduit:

<tr> 
<td> 
<select name="type[]" class="test"> 
    <option value="1">9x13</option> 
    <option value="2">10x15</option> 
    <option value="3">11x14</option> 
</select>   
</td> 
<td><input type="text" name="min_euro[]"></td> 
<td><input type="text" name="max_euro[]"></td> 
</tr> 

<tr> 
<td> 
<select name="type[]" class="test"> 
    <option value="1">9x13</option> 
    <option value="2">10x15</option> 
    <option value="3">11x14</option> 
</select>   
</td> 
<td><input type="text" name="min_euro[]"></td> 
<td><input type="text" name="max_euro[]"></td> 
</tr> 

Merci

Ralf

Answer 1

Donnez à chaque SELECT secondaire la même classe.

Ensuite, définissez un gestionnaire d'événements sur le SELECT principal qui met à jour les SELECT secondaires en ciblant cette classe.

Par exemple:

jQuery('#leveranciers').bind('change', function(event) { 
    // somehow determine the new set of options for all secondary SELECTs 
    jQuery('SELECT.secondary').each(function(i, e) { 
    jQuery(e).html(newOptionsMarkup); 
    }); 
    return true; 
}); 

(.. S'il vous plaît ne pas tenir compte de la terrible .html() approche fondée sur l'élément important est la mise à jour ainsi sont ciblées)