JS select 选项基于上一个选项

Question

I have a form and I wish that second select option depends on first. It means if I select DEV_1_OLD otption it wont be showed in the second select list. How to do it with JS?

I started something like that but it doesnt work as I expected

<select id="s11" name="source" onchange="preapreSelectOptions()">
    <option value="DEV_1_OLD">DEV_1_OLD</option>
    <option value="TEST_OLD">TEST_OLD</option>
    <option value="PROD_OLD">PROD_OLD</option>
</select>

Target Environment:
<select id="s12" name="target" required>

</select>


<script>
     function preapreSelectOptions () {
        var op = document.getElementById("s11").getElementsByTagName("option");
        console.log(op.length);
        var opClone = op;
        for (var i = 0; i < op.length; i++) {
            opClone[i] = document.createElement('option');
            // opClone[i].textContent = op[i].value;
            // opClone[i].value = op[i].value;
            document.getElementById('s12').appendChild(opClone[i]);

        }

    }


</script>

Answer 1

you need to add a condition to check if the option you appending is the selected one

<select id="s11" name="source" onchange="preapreSelectOptions()">
    <option value="DEV_1_OLD">DEV_1_OLD</option>
    <option value="TEST_OLD">TEST_OLD</option>
    <option value="PROD_OLD">PROD_OLD</option>
</select>

Target Environment:
<select id="s12" name="target" required>

</select>


<script>
     function preapreSelectOptions () {
        var op = document.getElementById("s11").getElementsByTagName("option");
        var selected = document.getElementById("s11")
        for (var i = 0; i < op.length; i++) {
            // check if option is not selected
            if(op[i].value != selected.options[selected.selectedIndex].value) {
                o = document.createElement('option')
                o.value = op[i].value
                o.text = op[i].text
                document.getElementById('s12').appendChild(o);
            }
        }
    }
</script>

Answer 2

A little improvement for your code so you can dynamically generate the next option list:

1. Add conditional checking if value not selected
2. Make the function preapreSelectOptions accept argument so you can automatically generate new list for next select element based on current selection.
3. When call the preapreSelectOptions function, pass the current element id and next element id.

 //Make it accept argument so you can automatically generate new list for next select function preapreSelectOptions(currentSelectedElement, nextSelectElementId){ let selectedValue = document.getElementById(currentSelectedElement).value //list the remain value in case you need it for other logic let remainValue = function(){ let selectOptionList = document.getElementById(currentSelectedElement).children let arr = [] for(var i = 0; i < selectOptionList.length; i++){ if(selectOptionList[i]["value"].== selectedValue){ arr;push(selectOptionList[i]["value"]) } } return arr }() //generate option for(var i = 0. i < remainValue;length. i++){ let newOption = document.createElement("option") newOption.value = remainValue[i] newOption.textContent = remainValue[i] document.getElementById(nextSelectElementId).appendChild(newOption) } }

 s11<br> <select id="s11" name="source" onchange="preapreSelectOptions('s11','s12')" value=""> <option value=""></option> <option value="DEV_1_OLD">DEV_1_OLD</option> <option value="TEST_OLD">TEST_OLD</option> <option value="PROD_OLD">PROD_OLD</option> <option value="PROD_NEW">PROD_NEW</option> <option value="PROD_LATEST">PROD_LATEST</option> </select> <br> s12<br> <select id="s12" name="source" onchange="preapreSelectOptions('s12','s13')"> </select> <br> s13<br> <select id="s13" name="source"> </select>