popolamento selezionare l'opzione in modo dinamico con jQuery

Question

Ci saranno due elenchi a discesa,

prima avere l'elenco dei vendor mobili, e la seconda ha l'elenco dei modelli al fornitore.

Quando si seleziona un fornitore dal primo elenco a discesa, il secondo elenco a discesa deve riempire in modo dinamico il modello pertinente per quel fornitore. Questo è per il sito Web mobile, è meglio utilizzare jquery-mobile

I valori di opzione per il secondo saranno in una mappa json.

<select class="mobile-vendor"> 
    <option value="motorola">Motorola</option> 
    <option value="nokia">Nokia</option> 
    <option value="android">Android</option> 
    </select> 

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

<select class="model"> 
    <option></option> 
</select> 

Ad esempio, se l'utente seleziona Nokia nel primo elenco a discesa, il secondo elenco a discesa dovrebbe avere N97, N93 come le opzioni.

Answer 1

EDIT: Nuovo javascript per prendere in considerazione la struttura JSON aggiornamento:

$(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 += '<option>' + key + '</option>'; 
      }); 
      return output; 
     }); 
    }).change(); 

    // bonus: how to access the download link 
    $model.change(function() { 
     $('#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show(); 
    }); 
}); 

esempio di funzionamento è disponibile in jsFiddle.

Nota che questo dovrebbe funzionare correttamente con jQuery mobile.