填充選擇選項動態與jquery

Question

將有兩個下拉列表，

首先擁有移動供應商的名單，第二有每個供應商型號列表。

當從第一個下拉列表中選擇一個供應商時，第二個下拉列表應該爲該供應商的相關模型動態填充。 這是用於移動網站，最好使用jquery-mobile

第二個選項的值將在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> 

例如，如果用戶選擇在所述第一下拉列表諾基亞，第二下拉列表應當具有N97，N93作爲選項。

Answer 1

編輯：全新的JavaScript考慮到更新後的JSON結構：

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

工作實例可用in jsFiddle。

請注意，這應該與jQuery手機一起工作就好了。