-1

I am new to javascript and have the following problem:

In HTML I have multiple select elements with the same list of options. (In this example 2.)
How can I make it that if you select 'Option 1' in the first select you can not select 'Option 1' in the second select element.
Also when you then select 'Option 2' in the first select you should be again possible to select
'Option 1' in the second but not 'Option 2'.

This is how the html looks:

<select id="1">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

<select id="2">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

This is what I found for the js: Removing an item from a select box

I tried to use it to solve my problem but it didn't work.

Can you help me? I'm sorry if this is very simple.

Community
  • 1
  • 1
MAX
  • 1

2 Answers2

1

I think this is what you wanted. Hide the option and show it if other options are selected.

$(function(){
$("#sel1").change(function(){
var selection=$(this).find(":selected").val();
$('#sel2 option').show();
var el=$('#sel2 option[value="'+selection+'"]').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel1">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

<select id="sel2">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>
CaptainHere
  • 698
  • 6
  • 14
0

Assign id to each of the tag, Create a Javascript function that either adds or removes a particular option OnSelect.

The Example included should work.

meks285
  • 29
  • 5