CODEWITHSUNDEEP
javascriptjquery
Ratan Servegar
Ratan Servegar

Reputation: 415

Jquery/Javascript multiple select dropdown with same options

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/

Upvotes: 2

Views: 2086

Answers (2)

Nisarg Shah
Nisarg Shah

Reputation: 14561

Here's the working snippet.

Two changes from your code are:

  1. 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.

  2. 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>

Upvotes: 3

Sparky
Sparky

Reputation: 297

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');
}
});

Upvotes: 0

Related Questions