隐藏/显示辅助选择中的所选选项 [英] Hide/show the selected option on a secondary select

问题描述

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

I have two <select> elements with different IDs.

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

When the user selects a value from the first select box, I want the second select box to only display connected values.

我的代码:

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

因此，当用户从第一个选择框中选择"test1"时，他在第二个选择框中将仅看到"test2"，"test3"和"test4"；从第一个开始的"test2"将在第二个框中显示"test6"，"test7"和"test8".

So when user selects "test1" from first select boxm he will see only "test2", "test3" and "test4" on the second select box; "test2" from first will show "test6", "test7" and "test8" in the second box.

如何使用JavaScript解决此问题?

How can I use JavaScript to resolve this problem?

推荐答案

如果可以使用jQuery，则始终可以清除并将选项附加到第二个选择项上.

If you can use jQuery then you can always just clear and append the options to the second select.

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

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

仅使用javascript有点复杂，但是我仍然会采用相同的方法.

using only javascript is a bit more complicated but I would still take the same approach.

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

如您所见，

仍然可以实现您的期望，但是您没有隐藏任何选项.

as you can see it still does what you expect but you are not hiding options.

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

这篇关于隐藏/显示辅助选择中的所选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！