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

Sirwan Afifi

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

guvenckardas

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

});

Collected from the Internet

Please contact [email protected] to delete if infringement.