Change <Select>'s Option and Trigger Events with JavaScript

Change select's option and trigger events with JavaScript

Unfortunately, you need to manually fire the change event. And using the Event Constructor will be the best solution.

var select = document.querySelector('#sel'),    input = document.querySelector('input[type="button"]');select.addEventListener('change',function(){    alert('changed');});input.addEventListener('click',function(){    select.value = 2;    select.dispatchEvent(new Event('change'));});

<select id="sel" onchange='alert("changed")'>  <option value='1'>One</option>  <option value='2'>Two</option>  <option value='3' selected>Three</option></select><input type="button" value="Change option to 2" />

Trigger change event select using jquery

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

Trigger change() event when setting select's value with val() function

I had a very similar issue and I'm not quite sure what you're having a problem with, as your suggested code worked great for me. It immediately (a requirement of yours) triggers the following change code.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

Then I take the value from the database (this is used on a form for both new input and editing existing records), set it as the selected value, and add the piece I was missing to trigger the above code, ".change()".

$('#selectField').val(valueFromDatabase).change();

So that if the existing value from the database is 'N', it immediately hides the secondary input field in my form.

Trigger change event by changing selectedIndex of select without jQuery

You can try to trigger it manually by just calling onchange on your select when you are changing the index. Like this:

select.onchange();

Or you can do:

select.dispatchEvent(new Event('change'));

How to force a change in option of select

You could just trigger your change event once loaded. I copied your snippet below and just added .trigger('change'), you'll notice volvo will alert onload.

$('select').change(function(){  alert(this.value);}).trigger('change');

<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body>
<select>  <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option></select>  </body></html>

How do you select a particular option in a SELECT element in jQuery?

A selector to get the middle option-element by value is

$('.selDiv option[value="SEL1"]')

For an index:

$('.selDiv option:eq(1)')

For a known text:

$('.selDiv option:contains("Selection 1")')

EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:

$('.selDiv option:eq(1)').prop('selected', true)

In older versions:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3: Use caution with $(e).text() as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option> tag):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

If you simply use e.text any extra whitespace like the trailing newline will be removed, making the comparison more robust.

Change <Select>'s Option and Trigger Events with JavaScript