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

Answer 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();        

});

Answer 2

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> 

Answer 3

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

Answer 4

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.