How can I remove options in multiple dropdown menus

Question

I was wondering if someone got an idea how to remove a choice you made in multiple dropdown menus.

I have no idea if you can do it with dropdown menu's maybe I need datalist or something else.

But what I mean is I have for example 6 dropdown menu's like this dropdown menu's

I made it so you have 1 - 6 but if I choose number 3 in the first one, how can I remove it in the 2nd menu, or make in invisible.

I had this problem in multiple projects from me but never know how to solve it.

Code of 1 of the menu's

<select name="getal" form="enquete" />

  <?php
    for($i=1; $i<=5; $i++)
    {
      echo "<option value=".$i.">".$i."</option>";
    }
  ?> 
</select>

Answer 1

Let´s say you got 2 option select items like this:

<select name="getal" form="enquete" class="selectmenu"/>
<?php
      for($i=1; $i<=5; $i++)
    {
      echo "<option value=".$i.">".$i."</option>";
    }
?> 
</select>
<select name="getal2" form="enquete" class="selectmenu"/>
<?php
  for($i=1; $i<=5; $i++)
  {
    echo "<option value=".$i.">".$i."</option>";
  }
?> 
</select>

You can add 2 jquery selectors - they can be dynamic - I´m showing you how to do it with 2 dropdown lists:

var $drop1 = $("#geta1");
var $drop2 = $("#geta2");

Create a function to react on change of dropdown 1 (again, you can do it on each beside the clicked one):

$drop1.change(function() {
    var selectedItem = $(this).val();
    if (selectedItem) {
        $drop2.find('option[value="' + selectedItem + '"]').remove();
    }
});

We are just removing the options, if you want you can re-add them when changed again. Create one array and iterate through the options, if not present, append the missing options.

Is this what you want to do?

Answer 2

 $("#drop1").change(function () {
        var d1 = this.value;
        if(d1==3)
        {
        $('#drop3').hide();
        }
    });