在辅助选择上隐藏/显示选定的选项

Question

我有两个<select>元素具有不同的ID。

当用户从第一个选择框中选择一个值时，我希望第二个选择框只显示连接的值。

我的代码：

<select id="ExtraField_1" name="ExtraField_1"> 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
    <option value="5">test5</option> 
    <option value="6">test6</option> 
    <option value="7">test7</option> 
    <option value="8">test8</option> 
    <option value="9">test9</option> 
    <option value="10">test10</option> 
    <option value="11">test11</option> 
    <option value="12">test12</option> 
</select> 
<select id="ExtraField_2" name="ExtraField_2"> 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
    <option value="5">test5</option> 
    <option value="6">test6</option> 
    <option value="7">test7</option> 
    <option value="8">test8</option> 
    <option value="9">test9</option> 
    <option value="10">test10</option> 
    <option value="11">test11</option> 
    <option value="12">test12</option> 
    <option value="13">test13</option> 
    <option value="14">test14</option> 
    <option value="15">test15</option> 
    <option value="16">test16</option> 
    <option value="17">test17</option> 
    <option value="18">test18</option> 
    <option value="19">test19</option> 
    <option value="20">test20</option> 
</select> 

因此，当用户从第一选择“测试1”中选择boxm他会看到只有“测试2”，“TEST3”，并在第二个选择框“TEST4”;第一个“test2”将在第二个框中显示“test6”，“test7”和“test8”。

如何使用JavaScript解决此问题？

Answer 1

如果你可以使用jQuery，那么你总是可以清除并附加选项到第二个选择。

$('#ExtraField_1').change(function(){ 
     $('#ExtraField_2').find('option').remove() 
     if($(this).val() == '1'){ 
      $('#ExtraField_2').append($("<option </option>").attr('value','2').text('test2')); 
      $('#ExtraField_2').append($("<option></option>").attr('value','3').text('test3')); 
      $('#ExtraField_2').append($("<option></option>").attr('value','4').text('test4')); 
     } 
     if($(this).val() == '2'){ 
      $('#ExtraField_2').append($("<option></option>").attr('value','5').text('test5')); 
      $('#ExtraField_2').append($("<option></option>").attr('value','6').text('test6')); 
      $('#ExtraField_2').append($("<option></option>").attr('value','7').text('test7')); 
     } 
    }); 

只使用JavaScript是一个比较复杂一点，但我仍然会采取同样的做法

http://jsfiddle.net/8XVuv/2/

。

function createOption(otext,oValue){ 
     var newOption = document.createElement('option'); 
     newOption.text = otext; 
     newOption.value = oValue; 
     return newOption; 
    } 

    function clearSelect(theSelect){ 
     for(var i = 0;i <= theSelect.options.length+1;i++) 
     { 
      theSelect.remove(); 
     } 
    } 

    function onSelect(theSelect){ 
     var nextSelect = document.getElementById('ExtraField_2'); 
     clearSelect(nextSelect); 
     var selected = theSelect.options[theSelect.selectedIndex]; 

     if(selected.value == 1){ 
      nextSelect.add(createOption('test2','2')); 
      nextSelect.add(createOption('test3','3')); 
      nextSelect.add(createOption('test4','4')); 
     } 
     if(selected.value == 2){ 
      nextSelect.add(createOption('test5','5')); 
      nextSelect.add(createOption('test6','6')); 
      nextSelect.add(createOption('test7','7')); 
     } 

    } 

与HTML：

<select id="ExtraField_1" name="ExtraField_1" onchange="javascript: onSelect(this);" > 
    <option value="0">Select a test..</option> 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
    <option value="5">test5</option> 
    <option value="6">test6</option> 
    <option value="7">test7</option> 
    <option value="8">test8</option> 
    <option value="9">test9</option> 
    <option value="10">test10</option> 
    <option value="11">test11</option> 
    <option value="12">test12</option> 
</select> 

<select id="ExtraField_2" name="ExtraField_2"> 
    <option value="0">Select from the left</option> 
</select>​ 

，你可以看到它仍然没有你所期望的，但你没有隐藏的选项。

http://jsfiddle.net/upKzW/13/

Answer 2

$('#ExtraField_1').change(function() { 
$('#ExtraField_2').val(this.value); 

}）;

http://jsfiddle.net/judearasu/rF8G6/