javascript - Hide an option in a dropdown menu, when a specific option has been selected in another menu -

i'm stuck right on following problem: have 2 dropdown menus next each other, both offer same options choose (users can choose travel route choosing point of departure , destination).

the items on these dropdown menus taken table in database. want achieve following:

locations "a", "b" , "c" choosable start or destination. when user chooses "b" point of departure (in 1st dropdown menu), option should not shown anymore in 2nd dropdown menu (destination). (edit: should reappear, when option selected in 1st dropdown) same "a" , "c" of course.

the code use right fill dropdown menus is:

<select name="anfang"> <?php  $sql = "select * orte"; $result = mysqli_query($dblogin,$sql);   while($zeilestart=mysqli_fetch_array($result))  { include("includes/database.php");  $ortname=$zeilestart['name']; $ortkurz=$zeilestart['kurz'];  echo "<option value=\"$ortkurz\">"; echo $ortname;  echo "</option>"; } ?> </select> 

this code 1st dropdown menu (start), code 2nd menu pretty same.

i assume javascript-code can solve problem, don't know how it... can me? :)

thanks , kind regards

weheri

the following code should easy understand - queries dom first dropdown list's select element , second dropdown lists' options elements. attaches event handler onchange event of first select, whenever value changes, handler function called check options on second select against selected value. if value matches, sets disabled attribute on option, otherwise if option has disabled attribute (from previous selection), removes it.

you can add page before closing body tag, changing secondselect name of second dropdown.

<script>     var select1 = document.queryselector('select[name="anfang"]'),         secondlist= document.queryselectorall('select[name="secondselect"] option');     select1.onchange = function(){         var selected = this.value;         for(var i=0;i<secondlist.length;i++){              if(secondlist[i].value==selected)                 secondlist[i].setattribute('disabled',true);              else if(secondlist[i].getattribute('disabled'))                 secondlist[i].removeattribute('disabled');         }     } </script> 

if hide element altogether (instead of disabling it), can use style attribute instead of disabled:

<script>     var select1 = document.queryselector('select[name="anfang"]'),         secondlist= document.queryselectorall('select[name="secondselect"] option');     select1.onchange = function(){         var selected = this.value;         for(var i=0;i<secondlist.length;i++){              if(secondlist[i].value==selected)                 secondlist[i].style.display = "none";              else if(secondlist[i].style.display == "none")                 secondlist[i].removeattribute('style');          }     } </script>