如何将onselect投放到select标签中以更改第二个select标签的值

Question

Hi guys I am working within a project and would like to get some advice, I have one problem where I can't find any clear answer.

I am about create a registration page where I would like to have <select> instead of <input> on this step users are going to choose device which they use like presented below:

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

And after choosing a brand I would like to have a <select> with model but for example If user choose "Motorola" I would like to show only the most common motorola models etc.

Regards

Answer 1

Like it's been suggested, I'd use a cascading dropdown. Here is an example of a cascading dropdown:

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

From here, you could take it a step farther by hiding the models dropdown until a device is chosen, or whatever else you like.