CODEWITHSUNDEEP
jquery
Dre
Dre

Reputation: 35

Handle onchange event on select

I have two select menus. When I choose an option from one select, the value of the other select should be changed to "Choose Letter" or "Choose Number" respectively.

I tried to set onchange events on both selects, and it works, but only after first change. For example, when I select option "A" in "Select Letter" menu, and after that select some option in "Select Number", the "Select Letter" value sets to "Select Letter", just as I wanted. But when I do the same operation again, it doesn't work.

    <select id="sel_letter">
        <option value="x">Select Letter</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>

    <select id="sel_num">
        <option value="x">Select Number</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

JS:

    $('body').on('change', '#sel_letter', function (event) {
        var selected_op = $('#sel_num').find("option[value=x]");
        selected_op.attr("selected", true);
    });

    $('body').on('change', '#sel_num', function (event) {
        var selected_op = $('#sel_letter').find("option[value=x]");
        selected_op.attr("selected", true);
    });

Upvotes: 0

Views: 385

Answers (2)

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

You can also use .not(selector)

Case-1: Generalized for all the select tag

$('select').on('change', function(e) {
   $('select').not($(this)).val('x');
});

Case-2: If you want to do it based on id then you can use following ways.

$('#sel_letter, #sel_num, #sel_alpha').on('change', function(e) {
   $('#sel_letter, #sel_num, #sel_alpha').not($(e.target)).val('x');
});

siblings 

$(this).siblings().val('x');

$('#sel_letter, #sel_num, #sel_alpha').siblings().not(this).val('x');


//.not(selector) used
$('#sel_letter, #sel_num, #sel_alpha').on('change', function(e) {
   $('#sel_letter, #sel_num, #sel_alpha').not(this).val('x');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="sel_letter">
  <option value="x">Select Letter</option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

<select id="sel_num">
  <option value="x">Select Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select id="sel_alpha">
  <option value="x">Select Alpha</option>
  <option value="1">ABC1</option>
  <option value="2">XYZ2</option>
  <option value="3">PQR3</option>
</select>

Upvotes: 0

eisbehr
eisbehr

Reputation: 12452

Just use .val() on the select element, to set the value to x. jQuery will do the rest for you.

$('body').on('change', '#sel_letter', function() {
    $('#sel_num').val('x');
});

$('body').on('change', '#sel_num', function() {
    $('#sel_letter').val('x');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="sel_letter">
  <option value="x">Select Letter</option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

<select id="sel_num">
  <option value="x">Select Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

It's even possible to just use one event for both. And if these are static elements you don't need a delegation. Only for example:

$('#sel_letter, #sel_num').on('change', function(e) {
    $($(e.target).is('#sel_letter') ? '#sel_num' : '#sel_letter').val('x');
});

Upvotes: 1

Related Questions