JavaScript 选择

Question

我正在处理一个具有多个选择框的表单。当用户从 selectbox1 中选择一个选项时，我需要 selectbox2 active 的另一个值。同样，当他选择 selectbox2 的另一个值时，我需要 selectbox3 active 的另一个值。

Select Region 
    <select name='region'>
        <option value='nw'>North West</option>
        <option value='sw'>South West</option>
        <option value='w'>West</option>
    </select>
<br />
Select Quarter
    <select name='quarter'>
        <option value='bda'>Bamenda</option>
        <option value='man'>Mankon</option>
        <option value='ndop'>Ndop</option>
    </select>
<br />
Select Area
    <select name='area'>
        <option value='ba'>Bambili</option>
        <option value='bi'>Bambui</option>
        <option value='cc'>CCk</option>
    </select>
<br />

当用户选择 NORTH WEST 时，让下一个选择框选择 BAMENDA。

Answer 1

在 HTML 中的 select 中添加一个 onchange 函数，以及下面的 javascript 函数。

function updateSelect(id) {
    var index = document.getElementById(id).selectedIndex;
    document.getElementById("region").selectedIndex = index;
    document.getElementById("quarter").selectedIndex = index;
    document.getElementById("area").selectedIndex = index;
}

Select Region 
<select name='region' id='region' onchange='updateSelect("region")'>
  <option value='nw'>North West</option>
  <option value='sw'>South West</option>
  <option value='w'>West</option>
</select>
<br />
Select Quarter
<select name='quarter' id='quarter' onchange='updateSelect("quarter")'>
  <option value='bda'>Bamenda</option>
  <option value='man'>Mankon</option>
  <option value='ndop'>Ndop</option>
</select>
<br />
Select Area
<select name='area' id='area' onchange='updateSelect("area")'>
  <option value='ba'>Bambili</option>
  <option value='bi'>Bambui</option>
  <option value='cc'>CCk</option>
</select>