javascript - jQuery 触发器在选定的下拉选项上单击(或选择)

Question

我正在尝试使用 jQuery 在所选的下拉选项上触发页面加载时的点击功能，以便可以进行后续操作，但无法使其正常工作。

我试过:

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

或

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

或

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

它们都不起作用，请注意我选择的 id 是 #customlist 我需要单击的 selected 下拉元素的 id 是 #customlist_chzn_o_2 和值选择选项的数量是 9

Answer 1

如果我没理解错的话，你需要触发原始 select 上的 change 事件，而不是自定义或他的 option .

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

但是当您更改原始select值时，比您应该触发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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/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>