如何將onselect投放到select標簽中以更改第二個select標簽的值

Question

嗨，大家好，我正在一個項目中工作，想獲得一些建議，但是我有一個問題，我找不到明確的答案。

我要創建一個注冊頁面，在此步驟中，我希望使用<select>而不是<input> ，用戶將選擇使用的設備，如下所示：

    <tr><th>Device</th> 
  <th><select required="required">
  <option value="Acer">Acer</option>
  <option value="Alcatel">Alcatel</option>
  <option value="Archos">Archos</option>
  <option value="Asus">Asus</option>
  <option value="GoClever">GoClever</option>
  <option value="HP">HP</option>
  <option value="HTC">HTC</option>
  <option value="Huawei">Huawei</option>
  <option value="Lenovo">Lenovo</option>
  <option value="LG">LG</option>
  <option value="Motorola">Motorola</option>
  <option value="MyPhone">MyPhone</option>
  <option value="Prestigio"></option>
  <option value="Samsung"></option>
  <option value="Sony"></option>
  <option value="Toshiba"></option>
  <option value="ZTE"></option>
  <option contenteditable="true" value="Other">Other</option>
  </select></th></tr>

在選擇了一個品牌之后，我希望有一個<select>型號，但是例如，如果用戶選擇“ Motorola”，我只想展示最常見的Motorola型號等。

問候

Answer 1

就像有人建議的那樣，我將使用級聯下拉列表。 這是一個級聯下拉列表的示例：

演示： jsFiddle

var models = {
    'Acer': ['Acer Model 1', 'Acer Model 2', 'Acer Model 3'],
    'Alcatel': ['Alcatel Model 1', 'Alcatel Model 2', 'Alcatel Model 3'],
    'Archos': ['Archos Model 1', 'Archos Model 2', 'Archos Model 3'],
    'Asus': ['Asus Model 1', 'Asus Model 2', 'Asus Model 3'],
    'GoClever': ['GoClever Model 1', 'GoClever Model 2', 'GoClever Model 3'],
    'HP': ['HP Model 1', 'HP Model 2', 'HP Model 3']
    // and so on...
}

var $models = $('#model');
$('#device').change(function () {
    var devices = $(this).val(), elems = models[devices] || [];

    var html = $.map(elems, function(elems){
        return '<option value="' + elems + '">' + elems + '</option>'
    }).join('');
    $models.html(html)
});

從這里開始，您可以通過隱藏模型下拉菜單直到選擇了設備或您喜歡的其他任何東西來走得更遠。