jQuery simulate click event on select option

Question

I have a select menu that triggers an AJAX request once one of the options has been clicked. I need to trigger a click event on the relevant option from a link. So I have code similar to the below, and although it changes the value of the select, it doesn't simulate a click:

$('#click').click(function(){
    var value = $(this).attr("rel");
    $('#select').val(value);
    return false;
});

<select id="select" name="select">
    <option>Select...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
    
<a href="#" rel="1" id="click">Click for option 1</a>

larrydalmeida · Answer 1 · 2017-09-28T12:44:45.083

19

Triggering a click event on the option will not work. Here is a snippet that does:

    $('#click').on('click', function(){
        var value = $(this).attr('rel'); //get the value
        value++; //increment value for the nth-child selector to work

        $('#select')
          .find('option:nth-child(' + value + ')')
          .prop('selected',true)
          .trigger('change'); //trigger a change instead of click

        return false;
    });

I have setup a fiddle here showing the same. This should work.

Instead of using a click you can trigger the change event and achieve the same effect.

edited Sep 28 '17 at 12:44

answered Jul 09 '15 at 16:15

larrydalmeida

1,570
3
16
31

IMO your answer is better as many select have an onchange function :) – Vincent Teyssier Jan 08 '16 at 11:14
1

I didn't realize that 'nth-child' starts at `1` *not `0` !* - https://api.jquery.com/nth-child-selector/ : *"Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. "* Nice pointer, thanks – Gene Bo Sep 26 '18 at 23:43

score 4 · Answer 2 · answered Mar 21 '13 at 14:16

4

$('#click').click(function(){
    var value = $(this).attr("rel");
    $('#select')
        .val(value)
        .trigger('click');
    return false;
});

Merely setting the value of a <select> does not trigger the click event of that element; it must be called directly.

answered Mar 21 '13 at 14:16

Brad M

7,857
1
23
40

Thanks for the response. That does make sense, but I have implemented your example above and it is still not triggering the AJAX call that is made when an option has been selected. Any ideas? – Stuart Taylor-Jones Mar 21 '13 at 14:27
6

Instead of triggering a click event, trigger a change event. – Brad M Mar 21 '13 at 14:34

score -2 · Answer 3 · answered Mar 21 '13 at 14:33

It's part of WooCommerce core, so I cannot post all of it. But here is a snippet although I am not too sure if it will tell you much...

.on( 'change', '.variations select', function( event ) {

    $variation_form = $(this).closest('form.variations_form');
    $variation_form.find('input[name=variation_id]').val('').change();

    $variation_form
        .trigger( 'woocommerce_variation_select_change' )
        .trigger( 'check_variations', [ '', false ] );

    $(this).blur();

    if( $().uniform && $.isFunction( $.uniform.update ) ) {
        $.uniform.update();
    }

} )

jQuery simulate click event on select option

3 Answers3

Linked