jQuery simulate click event on select option

问题

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.

回答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.

回答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.

回答3:

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();
    }

} )

来源：https://stackoverflow.com/questions/15549975/jquery-simulate-click-event-on-select-option

标签

jquery

select

click

option