Trigger change event <select> using jquery

Question

is there anyway i could trigger a change event on select box on page load and select a particular option.

Also the function executed by adding the trigger after binding the function to the event.

I was trying to output something like this

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

do you want to set a particular option on load ? or your want to trigger your change event ? — Manse
– Manse, Commented May 11, 2012 at 8:02
Could you expand on the final solution. Are you trying to have an option forced when the page loads, or select a different option when something specific is selected? — Matthew Riches
– Matthew Riches, Commented May 11, 2012 at 8:02
hi, thanks for your feedback i was able to solve the problem and have documented it. — kishanio
– kishanio, Commented May 11, 2012 at 8:35

Miroslav Holec · Accepted Answer · 2016-08-19 07:24:01Z

385

Use val() to change to the value (not the text) and trigger() to manually fire the event.

The change event handler must be declared before the trigger.

Here's a sample

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

edited Aug 19, 2016 at 7:24

Miroslav Holec

3,25727 silver badges24 bronze badges

answered May 11, 2012 at 8:04

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kishanio Over a year ago

Also after changing option i wanted to execute the change event function. w.r.t this. alert box should execute.

Joseph Over a year ago

@KishanThobhani you should call that after adding the handler. see the sample.

Larzan Over a year ago

The important part of this solution is: The change event handler MUST be declared BEFORE the trigger (makes sense...), in my case that was the problem, thanks!

Kamlesh Over a year ago

defined change function BEFORE you are using, solved my problem. Thanks.

Nitin Shinde Over a year ago

because JS is a scripting language and scripting language has an interpreter, If you fire an event before binding in first place your result is not expected as you think. so let the interpreter bind every event then fire it. ;)

ThiefMaster · Accepted Answer · 2012-05-11 08:02:18Z

37

To select an option, use .val('value-of-the-option') on the select element. To trigger the change element, use .change() or .trigger('change').

The problems in your code are the comma instead of the dot in $('.check'),trigger('change'); and the fact that you call it before binding the event handler.

answered May 11, 2012 at 8:02

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

1 Comment

Joshua Pinter Over a year ago

Any difference between using .change() and .trigger('change'), or just syntax preference?

Mohamed23gharbi · Accepted Answer · 2019-01-10 10:21:22Z

25

Another working solution for those who were blocked with jQuery trigger handler, that dosent fire on native events will be like below (100% working) :

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));

answered Jan 10, 2019 at 10:21

Mohamed23gharbi

1,80025 silver badges29 bronze badges

4 Comments

Tillito Over a year ago

I tried all the above, but only this one works for me. I think, because my select was inside vue. Thanks @Mohamed23gharbi!

Orhan Bayram Over a year ago

only this one works for me too.

Francesco Marchetti-Stasi Over a year ago

Indeed, I didn't manage to send change event from a SELECT using jQuery event handler, while this worked flawlessly.

Mohamed23gharbi Over a year ago

6 years after publishing this answer, I encountred same behavior, and the past me saved my day :D

Sohail xIN3N · Accepted Answer · 2014-03-01 13:05:17Z

18

$('#edit_user_details').find('select').trigger('change');

It would change the select html tag drop-down item with id="edit_user_details".

answered Mar 1, 2014 at 13:05

Sohail xIN3N

3,0312 gold badges33 silver badges29 bronze badges

Comments

Afraz Ahmad · Accepted Answer · 2018-02-13 09:09:58Z

1

Give links in value of the option tag

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

answered Feb 13, 2018 at 9:09

Afraz Ahmad

5,41634 silver badges40 bronze badges

Comments

Afraz Ahmad · Accepted Answer · 2018-02-13 09:15:55Z

1

If you want to do some checks then use this way

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

answered Feb 13, 2018 at 9:15

Afraz Ahmad

5,41634 silver badges40 bronze badges

Comments

Tillito · Accepted Answer · 2019-11-29 10:37:01Z

1

Based on Mohamed23gharbi's answer:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

In my case, where the elements were created by vue, this is the only way that works.

answered Nov 29, 2019 at 10:37

Tillito

7,9387 gold badges37 silver badges33 bronze badges

Comments

bdkopen · Accepted Answer · 2021-12-09 22:49:37Z

0

You can try below code to solve your problem.

By default, first option select:

jQuery('.select').find('option')[0].selected=true;

edited Dec 9, 2021 at 22:49

bdkopen

5041 gold badge6 silver badges17 bronze badges

answered Feb 20, 2020 at 10:21

Ketan Tambekar

1013 bronze badges

Collectives™ on Stack Overflow

Trigger change event <select> using jquery

8 Answers 8

5 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related