Javascript 如何将ad onselect添加到select标记中以更改第二个select标记的值

大家好，我在一个项目中工作，希望得到一些建议，我有一个问题，我找不到任何明确的答案

我将创建一个注册页面，在该页面中，我希望用户选择他们使用的设备，而不是此步骤，如下所示：

    <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>

在选择了一个品牌后，我希望有一个带有型号的，但例如，如果用户选择摩托罗拉，我只想展示最常见的摩托罗拉型号等

---

就像有人建议的那样，我会使用级联下拉列表。下面是一个级联下拉列表的示例：

演示：

---

从这里开始，您可以进一步隐藏模型下拉列表，直到选择了设备或其他您喜欢的功能。

您需要的功能称为级联下拉框。谷歌吧！

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