Remove selected value from other dropdowns
I have some html form labels and each of them has a dropdown list next to it.
Now I want people to choose a dropdown value but when one value is chosen this value has to be removed from other dropdown boxes.
This is my html (sort of):
<label>Gebruikersnaam</label> <select class="dropdown"><option>1 to 20</option></select>
<label>Gebruikersnaam</label> <select class="dropdown"><option>1 to 20</option></select>
<label>Gebruikersnaam</label> <select class="dropdown"><option>1 to 20</option></select>
<label>Gebruikersnaam</label> <select class="dropdown"><option>1 to 20</option></select>
<label>Gebruikersnaam</label> <select class="dropdown"><option>1 to 20</option></select>
When someone chooses 1 in the first dropdown this option should be removed in the other dropdown lists. Every dropdown list has the same class name.
This is what I came up to but this doesn't work:
- <script>
- $( ".dropdown" ).change(function() {
- dropdownval = $( ".dropdown" ).val();
- $(".dropdown option[value='dropdownval']").remove();
- });
- </script>