I'm trying to trigger a click function on page load with jQuery on chosen's dropdown option so that the follow-up action can take place but haven't been able to get it work.

I've tried:

jQuery("document").ready(function() {
setTimeout(function() {
    jQuery("customlist_chzn_o_2").trigger('click');
},10);

or

jQuery("document").ready(function() {   
    jQuery('#customlist').val(9).trigger("chosen:updated")  
});

or

jQuery("document").ready(function() {   
    jQuery('#customlist_chzn_o_2').trigger("chosen:updated")    
});

None of them are working, please note that my select's id is #customlist the id of dropdown element in chosen which I need to click is #customlist_chzn_o_2 and the value of the select option is 9

I'm trying to trigger a click function on page load with jQuery on chosen's dropdown option so that the follow-up action can take place but haven't been able to get it work.

I've tried:

jQuery("document").ready(function() {
setTimeout(function() {
    jQuery("customlist_chzn_o_2").trigger('click');
},10);

or

jQuery("document").ready(function() {   
    jQuery('#customlist').val(9).trigger("chosen:updated")  
});

or

jQuery("document").ready(function() {   
    jQuery('#customlist_chzn_o_2').trigger("chosen:updated")    
});

None of them are working, please note that my select's id is #customlist the id of dropdown element in chosen which I need to click is #customlist_chzn_o_2 and the value of the select option is 9

• javascript
• jquery
• html
• jquery-chosen

• Which plugin are you using? Can you show us your full code? – Mosh Feu Commented Oct 9, 2016 at 7:15
• This code will be applied to virtuemart's custom fields area in admin's add product view. – Ishan Commented Oct 9, 2016 at 7:51
• It doesn't matter where. If I understand you correctly, you are using a plugin for the custom dropdown. Don't you? If so, tell us which. It will be better if you can create a snippet or bin – Mosh Feu Commented Oct 9, 2016 at 7:57
• The plugin being used on which I need to work the code on is Chosen based on jQuery, here it is: harvesthq.github.io/chosen – Ishan Commented Oct 9, 2016 at 8:10

3 Answers 3

If I understand you correctly, you need to trigger the change event on the original select, not on the custom or his options.

When working with form fields, you often want to perform some behavior after a value has been selected or deselected. Whenever a user selects a field in Chosen, it triggers a "change" event on the original form field

But when you change the original select value, than you should trigger chosen:updated.

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

^{https://harvesthq.github.io/chosen/#change-update-events}

var sel1 = $('#sel1').chosen({width: '150px'}).change(function(){
  console.log($(this).val());
});

sel1.trigger('change');

var sel2 = $('#custom_field').chosen({width: '150px'});

//$('button').click(function() {
$(document).ready(function() {
  sel2.val('9');
  
  // Than you should trigger the "chosen:updated"
  sel2.trigger('chosen:updated');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet"/>

<select id="sel1">
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<hr />
<select id="custom_field">
  <option>option 1</option>
  <option>option 2</option>
  <option>9</option>
</select>

<button>Set custom_field's value to "9"</button>

To actually "trigger" the click event as if it was made by a user, I had to bine multiple answers as follows:

        $('#sel1')[0].selectedIndex = 0; // make selection
        $('#sel1')[0].focus(); // set the focus
        $('#sel1').trigger('change'); // actually trigger click event for listeners

chosen doesn't have a direct trigger for click/select. We have to take the underlying select element's selected value and explicitly run the contents of chosen's .on('change',..) .

// Original trigger function thru chosen.js
$('#custSelect').on('change', function(evt,params) {
    var custID = params.selected;
    //that gives us the VALUE of the selected option

    // below are the executive actions being done
    if(custID) chooseOne(custID);
});

// Programmatically changing the selected option
var e = document.getElementById('custSelect');
e.selectedIndex +=1 ; // selecting next option in the dropdown list

$('#custSelect').trigger('chosen:updated'); // this is only COSMETIC.
// updates the view to match underlying select element 
// but doesn't trigger chosen's on-change event

// now we retrieve the newly selected option's value:
var custID = e[e.selectedIndex].value; // analogous to params.selected above
// ...and do the execution ourselves.
if(custID) chooseOne(custID);

Alternatively, don't rely on chosen's on-change at all, and make one for the original <select> html element instead. I won't go into that here.