Remplir une option de sélection dynamicment avec jquery

Il y aura deux listes déroulantes,

D’abord, avoir la liste des fournisseurs de mobiles, et la seconde, la liste des modèles par fournisseur.

Lorsqu’on sélectionne un fournisseur dans la première liste déroulante, la deuxième liste déroulante doit être renseignée de manière dynamic avec le modèle approprié pour ce fournisseur. Ceci est pour le site web mobile, il est préférable d’utiliser jquery-mobile

Les valeurs d’option pour la seconde volonté dans une carte json.

 Motorola Nokia Android  selectValues = {"nokia" : {"N97":"download-link", "N93":"download-link"}, "motorola": {"M1":"download-link", "M2":"download-link"}}    

Par exemple, si l’utilisateur sélectionne Nokia dans la première liste déroulante, les options de la deuxième liste déroulante devraient être N97, N93.

EDIT: Nouveau javascript pour prendre en compte votre structure json mise à jour:

 $(function() { var selectValues = { "nokia": { "N97": "http://www.google.com", "N93": "http://www.stackoverflow.com" }, "motorola": { "M1": "http://www.ebay.com", "M2": "http://www.twitter.com" } }; var $vendor = $('select.mobile-vendor'); var $model = $('select.model'); $vendor.change(function() { $model.empty().append(function() { var output = ''; $.each(selectValues[$vendor.val()], function(key, value) { output += ''; }); return output; }); }).change(); // bonus: how to access the download link $model.change(function() { $('#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show(); }); }); 

Exemple de travail disponible dans jsFiddle .

Notez que cela devrait fonctionner parfaitement avec jQuery mobile.