jQuery 在选定的下拉选项上触发点击（或 select）

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

None 正在工作，请注意我的 select 的 ID 是 #customlist 我需要单击的所选下拉元素的 ID 是 #customlist_chzn_o_2 而 select 选项的值为 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>

Answer 2

chosen 没有直接触发 click/select。我们必须采用底层 select 元素的选定值，并显式运行选定的 .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);

或者，根本不要依赖 chosen 的 on-change，而是为原始 <select> html 元素创建一个。我不会在这里详细介绍。

Answer 3

实际上 "trigger" 点击事件就好像它是由用户制作的一样，我必须按如下方式组合多个答案：

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

jQuery 在选定的下拉选项上触发点击（或 select）

jQuery trigger click (or select) on chosen dropdown option

html

javascript

jquery

jquery-chosen