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>
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?
$("#drop1").change(function () {
var d1 = this.value;
if(d1==3)
{
$('#drop3').hide();
}
});