CODEWITHSUNDEEP
jquery
kishanio
kishanio

Reputation: 7089

Trigger change event <select> using jquery

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/

Upvotes: 206

Views: 392614

Answers (8)

Ketan Tambekar
Ketan Tambekar

Reputation: 101

You can try below code to solve your problem.

By default, first option select:

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

Upvotes: 0

Tillito
Tillito

Reputation: 7868

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.

Upvotes: 1

Mohamed23gharbi
Mohamed23gharbi

Reputation: 1800

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

Upvotes: 25

Afraz Ahmad
Afraz Ahmad

Reputation: 5416

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>

Upvotes: 1

Afraz Ahmad
Afraz Ahmad

Reputation: 5416

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>

Upvotes: 1

Joseph
Joseph

Reputation: 119887

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

Upvotes: 384

Sohail xIN3N
Sohail xIN3N

Reputation: 3041

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

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

Upvotes: 18

ThiefMaster
ThiefMaster

Reputation: 318788

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.

Upvotes: 37

Related Questions