CODEWITHSUNDEEP
javascriptjqueryjquery-select2
user4301988
user4301988

Reputation: 11

Select2 change attr in second select

How I can change an attribute of an <option> in my second <select> when the same value was selected in the first <select>?

More specifically: When I select an option in my first <select>, then the same option in the second <select> should be disabled.

$("body").on("select2:select", "#first", function(e) {
  var cur_id = e.params.data.id;
  $("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
  $("#second").trigger('refresh');
  $("#first").trigger('refresh');
});

$("body").on("select2:select", "#second", function(e) {
  var cur_id = e.params.data.id;
  $("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
  $("#second").trigger('refresh');
  $("#first").trigger('refresh');
});
<body>
  <select id="first" name="first">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  <select id="second" name="second">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</body>

Upvotes: 0

Views: 1501

Answers (3)

PinkTurtle
PinkTurtle

Reputation: 7041

Here is a consise way to do it.

$("select#first").on("change", function() {
  $("select#second option").each(function() {
    if ($("select#first option:selected").val() === $(this).val()) $(this).prop("disabled", true);
    else $(this).prop("disabled", false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <select id="first" name="first">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  <select id="second" name="second">
    <option value="1" disabled="disabled">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</body>

You might want to automatically select (kick to) another option too in your 2nd select when a user selects the option that is selected in the 2nd select. If that makes sense :-)

Upvotes: 1

guradio
guradio

Reputation: 15555

$("body").on("change", "#first", function(e) {//use change event
  var cur_id = $('option:selected',this).val();//get value of selected option
  console.log(cur_id);
  $(this).siblings("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});

$("body").on("change", "#second", function(e) {//use change event
  var cur_id = $('option:selected',this).val();//get value of selected option
  console.log(cur_id);
  $(this).siblings("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <select id="first" name="first">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  <select id="second" name="second">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</body>

Upvotes: 0

Sapotero
Sapotero

Reputation: 179

For select2 version >= 4.0.0

Solution:

$("select").val("1").trigger("change");

Upvotes: 0

Related Questions