I have a form that asks people to order something, lets just say "Red", "Blue", and "Green." Next to each color is a dropdown with the available order "1", "2", or "3".
If someone selects "2" for Red, I want to remove that option for the other colors that haven't been selected yet.
I'm not sure where to start. I am novice and have really only used HTML, CSS, and PHP although I have some javascript/jquery experience.
I'm messing around with the code below but need the "onchange" function to affect the SECOND dropdown and not the first...
function myFunction1() {
var x = document.getElementById("mySelect");
x.remove(x.selectedIndex);
}<form>
Select a fruit:
<br>
<select id="mySelect" onchange="myFunction1()">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<select id="mySelect2">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>Not sure if this is what you are expecting:
function removeSelectedNumber() {
var x = document.getElementById("numberSelect");
x.remove(x.selectedIndex);
}<form>
Select a fruit:
<br>
<select id="colorSelect">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<select id="numberSelect" onchange="removeSelectedNumber()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
<br>