Hiding options from select element, when selected in another select element

Question

I have multiple select elements on the page that contain the same options. I want to hide the selected options from thew other select elements.

this is an example of my code

var $drops = $('.drop'),
  // store a set of options
  $options = $drops.eq(1).children().clone();

$drops.change(function () {
  var $other = $drops.not(this),
    otherVal = $other.val(),
    newVal = $(this).val(),
 
  opts = $options.clone().filter(function () {
    return this.value !== newVal;
  });

  $other.html($opts).val(otherVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown1" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown2" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown3" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown4" class="drop">
      <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

In this example, if I select test1 from the first select element, it must not be shown as an option in the other select elements and when test2 is selected from the second select element then that must hidden in the other select elements etc.

Improved spelling and grammar and put the code block into a snippet. This code doesn't work in the snippet but that is why the user is asking the question. — Ben Thomas, Jun 02 '17 at 09:17
Related to: https://stackoverflow.com/a/1275452/4108884, your case is easier because you don't need switch to search for a letter equivalent. — Samuil Petrov, Jun 02 '17 at 09:24

score 1 · Accepted Answer · answered Jun 02 '17 at 09:47

This should give you what you need, it will not allow the same option to be selected in more than one dropdown simultaneously:

var $drops = $('.drop');

$drops.change(function () {
  $drops.find("option").show();
  $drops.each(function(index, el) {
    var val = $(el).val();
    if (val) {
     var $other = $drops.not(this);
     $other.find("option[value=" + $(el).val() + "]").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown1" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown2" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown3" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown4" class="drop">
      <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

will you please solve this problem here is link https://stackoverflow.com/questions/44919129/convert-group-function-result-of-mysql-into-php-array-and-pass-as-a-parameter-t — Mahantesh, Jul 05 '17 at 09:36

Hiding options from select element, when selected in another select element

1 Answers1