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>

Any help would be greatly appreciated.

Solution 1

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.

Solution 2

$('#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.

Comments

[Stuart Taylor-Jones]

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?

[Brad M]

Instead of triggering a click event, trigger a change event.

[Vincent Teyssier]

IMO your answer is better as many select have an onchange function :)

[Gene Bo]

I didn't realize that 'nth-child' starts at 1 not 0 ! - 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