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>模型但是例如如果用户选择“摩托罗拉”，我想只展示最常见的摩托罗拉模型等。

此致

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

从这里开始，你可以通过隐藏模型下拉列表直到选择一个设备，或者你喜欢的其他任何东西来进一步。

如何在选择标记中进行广告选择以更改第二个选择标记的值

1 个答案: