Question

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

我试过了：

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我选择的下拉元素的ID是#customlist_chzn_o_2，而选项的值是 9

Answer 1

如果我理解正确，您需要在原始change上触发select事件，而不是在自定义或option上触发。

使用表单字段时，通常需要在选择或取消选择值后执行某些操作。每当用户在Chosen中选择一个字段时，它就会在原始表单字段
上触发“更改”事件

但是当你更改原始select值，而不是时，您应该触发chosen:updated。

如果您需要更新选择字段中的选项并希望选择选择更改，则需要在该字段上触发“selected：updated”事件。 Chosen将根据更新的内容重新构建自己。

^{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没有点击/选择的直接触发器。我们必须获取基础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);

或者，不要依赖于所选择的on-change，而是为原来的<select> html元素创建一个。我不会在这里讨论。

Answer 3

要想真正地“触发”点击事件，就好像它是由用户造成的，我必须按照以下方式组合多个答案：

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

jQuery触发器在所选下拉选项上单击（或选择）

3 个答案: