How can I change selected value of a DropDownList with having change method?

Question

I was wondering if it's possible to get jQuery to select an option with having predefined change method.

Let me give me an example; I have a drop-down list like this:

<select id="ddl_BankRequestType">
    <option>-- Request Type ---</option>
    <option value="val1">Item1</option>
    <option value="val2">Item2</option>
</select>

If user selects Item1 or Item2 some logic will be executed:

$('#ddl_BankRequestType').change(function () {
     var selectedItem = $(this).find(":selected").text();
     if (selectedItem === 'Item1') {
         // codes
     } else if (selectedItem === 'Item2') {
         //other codes
     }
});

It works like a charm. Now in document.ready I want the second option be selected item, so I put this code:

$('#ddl_BankRequestType > option:eq(2)').attr('selected', true);

It also works, but I want the logic for Item2 to execute. I have tried the following, but they do nothing:

$('#ddl_BankRequestType > option:eq(2)').attr('selected', true).change();
$('#ddl_BankRequestType > option:eq(2)').attr('selected', true).trigger('change');

Possible duplicate of: http://stackoverflow.com/questions/1280499/jquery-set-select-index . That answer uses `prop` instead of `attr`. — Jack A., Sep 15 '15 at 14:14
@guvenckardas It works but it doesn't execute code for second if. http://jsfiddle.net/19kferho/ — Sirwan Afifi, Sep 15 '15 at 14:17
@SirwanAfifi that is happening because `change` event is added **after** executing the line that selects the item. — adricadar, Sep 15 '15 at 14:18
But it works on here :http://jsfiddle.net/19kferho/1/ @SirwanAfifi — guvenckardas, Sep 15 '15 at 14:18
Just an FYI, it's better to use the `value` of the option as that is less likely to change than the `text`. For instance, a person's name might change, but their SSN is less likely to. — vol7ron, Sep 15 '15 at 14:42

score 1 · Accepted Answer · edited Sep 15 '15 at 14:41

1

You can check the code from DEMO

$(function (){
  $('#ddl_BankRequestType').change(function () {
      var selectedItem = $(this).find(":selected").text();

      console.log(selectedItem)
      if (selectedItem === 'Item1') {
        alert('item1');
      } else if (selectedItem === 'Item2') {
        alert('item2');
      }
  });

  $('#ddl_BankRequestType > option:eq(2)').attr('selected', true).change();        

});

edited Sep 15 '15 at 14:41

vol7ron

40,809
21
119
172

answered Sep 15 '15 at 14:20

guvenckardas

738
4
8

:) It should have put the code after change method :) – Sirwan Afifi Sep 15 '15 at 14:21

score 0 · Answer 2 · answered Sep 15 '15 at 14:18

A quick fix should be something like below,

$('#ddl_BankRequestType').on("change",function () {
     var selectedItem = $(this).find(":selected").text();
     if (selectedItem === 'Item1') {
 doItem1();
     } else if (selectedItem === 'Item2') {
 doItem2();
     }
});
function doItem1(){
 alert('Item1'); 
 //other codes
}
function doItem2(){
 alert('Item2');
 //other codes
}
$(document).ready(function(){
$('#ddl_BankRequestType > option:eq(2)').attr('selected', true);
doItem2();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddl_BankRequestType">
    <option>-- Request Type ---</option>
    <option value="val1">Item1</option>
    <option value="val2">Item2</option>
</select>

score 0 · Answer 3 · answered Sep 15 '15 at 14:18

The problem is .attr() returns a string. So, you can't chain it to trigger the change event. You could do the following:

   var ddl_BankRequestType = $('#ddl_BankRequestType');
   ddl_BankRequestType.find('option:eq(2)').attr('selected', true);
   ddl_BankRequestType.trigger('change');

score 0 · Answer 4 · answered Sep 15 '15 at 14:18

This is likely a timing issue - since theoretically your code should be firing that trigger event based on the way you're doing it. I think it's simply firing the event before the change function is registered. jQuery's Document load lifecycle loops through all of the defined loaders in the order they're registered, so if you're not able to change when you set the option element as "selected" to after the change event is bound, you may be able to use the native timeout function to ensure it gets fired last.

I generally avoid using timeout like this, but in your scenario it may work:

setTimeout(function() { /* Set the option element true here */ }, 1000);

Best bet is to try and set the element after the change event is bound.

How can I change selected value of a DropDownList with having change method?

4 Answers4