Jquery/Javascript multiple select dropdown with same options

Question

I have a issue where i can have multiple select dropdown controls with the same options and i need to disable the option if its selected in one of the dropdowns and re-enable if the option is reset

$('select').change(function() {

  if (this.value != "-1") {
    $('#select1, #select2,#select3, #select4, #select5').not(this)
      .children('option[value=' + this.value + ']')
      .attr('disabled', true)
      .siblings().removeAttr('disabled');
  }
});

body {
  margin: 20px;
}

select {
  border: 0;
  width: 100%;
}

td {
  width: 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" width="50%">
  <tr>
    <td>Cost Saving</td>
    <td>
      <select name="" id="select1">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Imrpove Quality</td>
    <td>
      <select name="" id="select2">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve customer sat</td>
    <td>
      <select name="" id="select3">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve employee sat</td>
    <td>
      <select name="" id="select4">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Adhere to Regulatory compliance</td>
    <td>
      <select name="" id="select5">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
</table>

so if a user selects option 1 in select1 then option 1 needs to be disabled in all other select drop downs, and if the user selects "Please select one" then the option 1 needs to re-enabled"

I have the following but its not working correctly http://jsfiddle.net/EuNw4/208/

Nisarg Shah · Accepted Answer · 2018-09-04 12:46:54Z

Here's the working snippet.

Two changes from your code are:

I am re-evaluating available options every time the selected option changes. So if 1 & 3 are selected, it ensures that they are disabled on all select elements.

Without this, when you select 1, it will be disabled on all elements. But when you select 2, 2 will be disabled on all elements and 1 will be re-enabled on them. Hence to avoid such issues, I am first keeping track of all values that should be disabled, and then for every select element, disabling appropriate option elements.
Instead of .attr('disabled', true) you should use .attr('disabled', 'disabled') or with jQuery 1.7+ .prop('disabled', true).

$('select').change(function() {
  reEvaluateAvailableOptions();
});

function reEvaluateAvailableOptions() {
  var selectElements = $('#select1, #select2,#select3, #select4, #select5');

  var selectedValues = [];
  selectElements.each(function() {
    var value = $(this).val();

    value >= 0 && selectedValues.push(value);
  });

  // Disable all the selected values.
  selectElements.each(function() {
    var currentValue = $(this).val();


    $(this).children('option')
      .removeAttr("disabled")
      .each(function() {

        var value = this.value;
        if (selectedValues.indexOf(value) >= 0 && currentValue != value) {
          $(this).attr('disabled', "disabled");
        }
      });
  });
}

body {
  margin: 20px;
}

select {
  border: 0;
  width: 100%;
}

td {
  width: 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" width="50%">
  <tr>
    <td>Cost Saving</td>
    <td>
      <select name="" id="select1">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Imrpove Quality</td>
    <td>
      <select name="" id="select2">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve customer sat</td>
    <td>
      <select name="" id="select3">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve employee sat</td>
    <td>
      <select name="" id="select4">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Adhere to Regulatory compliance</td>
    <td>
      <select name="" id="select5">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
</table>

Thank you for your reply, but your answer also doesn't work correctly too,Here is what i did: select 1 2 3 4 5 in each of the select controls and then select chose in the 1st select option, 1 is still disabled in other selects, if a option is un selected it needs to be re-enabled
@TheConfusedCoder I just realized the mistake, and fixed it. Do you mind checking again? Also, let me know if you notice any specific issue.
Thank you so much, this is exactly what i wanted. it is working perfectly.

Sparky · Accepted Answer · 2018-09-04 12:33:40Z

0

You only specified 'disabling' the options. For good practice, you should specify enabling the option.

Duplicate your function and let it revert the disabled to false instead of true. Should look something like:

$('select').change(function() {

if (this.value != "-1") {
$('#select1, #select2,#select3, #select4, #select5').not(this)
  .children('option[value=' + this.value + ']')
  .attr('disabled', false)
  .siblings().removeAttr('disabled');

}else if (this.value = "1") {
$('#select1, #select2,#select3, #select4, #select5').not(this)
  .children('option[value=' + this.value + ']')
  .attr('disabled', true)
  .siblings().removeAttr('disabled');
}
});

answered Sep 4, 2018 at 12:33

Sparky

2971 silver badge11 bronze badges

1 Comment

Sparky Over a year ago

What happens if you change the '-1' to 0 everywhere in your code? I rarely use negative values. edit: I noticed the comment at the 'right' answer. Good luck!

Collectives™ on Stack Overflow

Jquery/Javascript multiple select dropdown with same options

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related