JavaScript - Hide Options in drop down menu when option is selected

Question

I have a form on website, made through WordPress, using BeTheme and Contact Form 7. One dropdown list has two options: "Vormittag' Session", and "Abend Session", the other has 5 options: "Premium", "PK1", "PK2", "PK3", "Famille". I would like it so "PK1", "PK2" and "PK3" disappear if "Abend Session" is selected.

Here is the HTML for the two forms:

<span class="wpcf7-form-control-wrap menu-772">
 <select name="menu-772" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
      <option value="Vormittag Session">Vormittag Session</option>
      <option value="Abend Session">Abend Session</option>
 </select>

<span class="wpcf7-form-control-wrap menu-634">
     <select name="menu-634" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
        <option value="Premium">Premium</option><option value="PK1">PK1</option>
         <option value="PK2">PK2</option>
         <option value="PK3">PK3</option>
         <option value="Familie">Familie</option>
     </select>
 </span>

And here is the JS Code I tried:

function hideValues(){
    var x = document.getElementsByName("menu-772");
    var y = document.getElementsByName("menu-634");
         if(x.value="Abend Session")
        {
            y.remove(2);
            y.remove(3);
            y.remove(4);       
         }
}

In the above JS code, the idea was to call the two lists x and y, and if the value in x was "Abend Session" then remove positions 2,3 and 4 in y. Am I on the right track or am I way off?

Answer 1

Try x[0].value=="Abend Session" . and call hideValues() on select change

document.getElementsByName returns a nodelist collection with a given name in the HTML document.So for selecting the first item use x[0] .

Or you can use element = document.querySelector(selectors); This will return the first Element within the document that matches the specified selector, or group of selectors.

Also the index will change if you remove one option.so for removing PK1,PK2,PK3 . you can simply use y[0].remove(1); three times or remove the option with last index first

 function hideValues(){ var x = document.getElementsByName("menu-772"); var y = document.getElementsByName("menu-634"); if(x[0].value=="Abend Session"){ y[0].remove(3); y[0].remove(2); y[0].remove(1); } } 

 <span class="wpcf7-form-control-wrap menu-772"> <select name="menu-772" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="hideValues()"> <option value="Vormittag Session">Vormittag Session</option> <option value="Abend Session">Abend Session</option> </select> <span class="wpcf7-form-control-wrap menu-634"> <select name="menu-634" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"> <option value="Premium">Premium</option><option value="PK1">PK1</option> <option value="PK2">PK2</option> <option value="PK3">PK3</option> <option value="Familie">Familie</option> </select> </span> 

Answer 2

Here, try this. Now it doesn't matter where in the select your PK values are.

        function hideValues()
        {
            var Abend = ["PK1", "PK2", "PK3"];
            var x = document.getElementsByName("menu-772");
            var src = document.getElementsByName("menu-634")[0]

            if (x[0].value == "Abend Session")
            {
                for (var count = src.options.length - 1; count >= 0; count--)
                {
                    if (Abend.indexOf(src.options[count].value) != -1)
                    {
                        src.remove(count, null);
                    }
                }
            }
        }