![](/img/trans.png)
[英]Chosen jQuery framework select option from dropdown with Javascript
[英]jQuery trigger click (or select) on chosen dropdown option
我试图在选择的下拉选项上使用 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
我需要点击的下拉元素的id是#customlist_chzn_o_2
,选择选项的值为9
如果我理解正确,您需要在原始select
上触发change
事件,而不是在 custom 或 his option
上触发。
使用表单域时,您通常希望在选择或取消选择值后执行某些行为。 每当用户在 Chosen 中选择一个字段时,它会在原始表单字段上触发“更改”事件
但是,当你改变原来的select
值,应该比你触发chosen: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>
chosen
没有直接触发点击/选择。 我们必须获取底层select
元素的 selected 值并显式运行 selected 的.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);
或者,根本不要依赖 selected 的 on-change,而是为原始<select>
html 元素创建一个。 我不会在这里讨论。
为了实际“触发”点击事件,就好像它是由用户制作的一样,我必须按如下方式组合多个答案:
$('#sel1')[0].selectedIndex = 0; // make selection
$('#sel1')[0].focus(); // set the focus
$('#sel1').trigger('change'); // actually trigger click event for listeners
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.