보조 선택에서 선택한 옵션 숨기기/표시

Question

두 ID가 서로 다른 두 개의 <select> 요소가 있습니다.

사용자가 첫 번째 선택 상자에서 값을 선택하면 두 번째 선택 상자에 연결된 값만 표시되기를 원합니다.

내 코드 :

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

그래서 사용자가 그는 단지 "TEST2", "TEST3"두 번째 선택 상자의 "테스트 4"가 표시됩니다 boxm 선택 처음부터 "TEST1"를 선택하면, "test2"는 첫 번째 상자에서 두 번째 상자에 "test6", "test7"및 "test8"을 표시합니다.

어떻게이 문제를 해결하기 위해 JavaScript를 사용할 수 있습니까?

Answer 1

jQuery를 사용할 수 있으면 언제든지 선택을 취소하고 두 번째 선택 항목에 추가 할 수 있습니다.

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

$('#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')); 
     } 
    }); 

조금 더 복잡하지만 난 여전히 같은 접근 방식을 취할 것입니다 만 자바 스크립트 사용. HTML과

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

    } 

:

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