Question

edit A: this is NOT a jquery question, but rather a jquery Mobile question.

edit B: I changed the title … originally I asked how to fire ‘click’ event specifically, but apparently the ‘click’ event is not the proper event to use if you want to re-create a jqm:Select Menu choice.

how to programatically fire an event on a jquery mobile select menu?

<select id       = 'my_select'   
        name     = 'my_select'   
        onchange = 'gf_handle_change( this.value );' >
  <option id = 'option_A'  value = 'A'> A </option>
  <option id = 'option_B'  value = 'B'> B </option>
</select>

<script>
  function gf_fire_event( args_val )
    { alert( 'test : ' + jQuery( '#option_' + args_val ) ) ; 
      jQuery( '#option_' + args_val ).trigger( 'click' ) ;
    }
  function gf_handle_change( args_val )
    { alert( args_val )  ;
    }
  gf_fire_event( 'A' ) ;
</script>

This does not work.

Answer 1

Here’s an example:

$(document).on('pagebeforeshow', '#index', function(){       
    $("#test-button").on( "click", function(event, ui) {
      $('#my_select option#option_B').trigger('click');    
    });

    $("#my_select option").each(function(){
        $(this).on( "click", function(event, ui) {
          $(this).attr('selected' , true);
          $('#my_select').selectmenu('refresh');                
        });         
    });    
});

Working jsFiddle example: http://jsfiddle.net/Gajotres/RZ68b/

One more thing, do not use onclick=”… or onchange=”… with jQuery Mobile, this could case problems with event triggering. Always bind your event programatically.