jQuery 触发下拉更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/902212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger change event of dropdown
提问by Prasad
I want to trigger the change event of dropdown in $(document).ready using jquery.
我想在 $(document).ready 中使用 jquery 触发下拉的更改事件。
I have a cascading dropdown for country and state in user details page. how can i set the value (which is taken from DB based on the user id) for country and state in MVC with C#.
我在用户详细信息页面中有一个国家和州的级联下拉列表。如何使用 C# 在 MVC 中设置国家和州的值（根据用户 ID 从数据库中获取）。
回答by Christophe Eblé
I don't know that much JQuery but I've heard it allows to fire native events with this syntax.
我不太了解 JQuery，但我听说它允许使用这种语法触发本机事件。
$(document).ready(function(){
$('#countrylist').change(function(e){
// Your event handler
});
// And now fire change event when the DOM is ready
$('#countrylist').trigger('change');
});
You must declare the change event handler before calling trigger() or change() otherwise it won't be fired. Thanks for the mention @LenielMacaferi.
您必须在调用 trigger() 或 change() 之前声明更改事件处理程序，否则它不会被触发。感谢您提及@LenielMacaferi。
More information here.
更多信息在这里。
回答by mlnyc
Try this:
尝试这个：
$(document).ready(function(event) {
$('#countrylist').change(function(e){
// put code here
}).change();
});
Define the change event, and trigger it immediately. This ensures the event handler is defined before calling it.
定义更改事件，并立即触发它。这确保在调用之前定义事件处理程序。
Might be late to answer the original poster, but someone else might benefit from the shorthand notation, and this follows jQuery's chaining, etc
可能会迟到回答原始海报，但其他人可能会从速记符号中受益，这遵循 jQuery 的链接等
回答by d.popov
Try this:
尝试这个：
$('#id').change();
$('#id').change();
Works for me.
为我工作。
On one line together with setting the value:
$('#id').val(16).change();
与设置值一起在一行上：
$('#id').val(16).change();
回答by xenon
If you are trying to have linked drop downs, the best way to do it is to have a script that returns the a prebuilt select box and an AJAX call that requests it.
如果您尝试链接下拉菜单，最好的方法是使用一个脚本来返回一个预先构建的选择框和一个请求它的 AJAX 调用。
Here is the documentation for jQuery's Ajax method if you need it.
$(document).ready(function(){
$('#countrylist').change(function(e){
$this = $(e.target);
$.ajax({
type: "POST",
url: "scriptname.asp", // Don't know asp/asp.net at all so you will have to do this bit
data: { country: $this.val() },
success:function(data){
$('#stateBoxHook').html(data);
}
});
});
});
Then have a span around your state select box with the id of "stateBoxHook"
然后在您的状态选择框周围有一个范围，ID 为“stateBoxHook”
回答by dave
alternatively you can put onchange attribute on the dropdownlist itself, that onchange will call certain jquery function like this.
或者，您可以将 onchange 属性放在下拉列表本身上，该 onchange 会像这样调用某些 jquery 函数。
<input type="dropdownlist" onchange="jqueryFunc()">
<script type="text/javascript">
$(function(){
jqueryFunc(){
//something goes here
}
});
</script>
hope this one helps you, and please note that this code is just a rough draft, not tested on any ide. thanks
希望这对您有所帮助，请注意，此代码只是草稿，未在任何 ide 上进行测试。谢谢
回答by Domi
For some reason, the other jQuerysolutions provided here worked when running the script from console, however, it did not work for me when triggered from Chrome Bookmarklets.
出于某种原因，jQuery此处提供的其他解决方案在从控制台运行脚本时有效，但是，从 Chrome Bookmarklets触发时它对我不起作用。
Luckily, this Vanilla JS solution(the triggerChangeEventfunction) did work:
幸运的是，这个 Vanilla JS 解决方案（triggerChangeEvent函数）确实有效：
/**
* Trigger a `change` event on given drop down option element.
* WARNING: only works if not already selected.
* @see https://stackoverflow.com/questions/902212/trigger-change-event-of-dropdown/58579258#58579258
*/
function triggerChangeEvent(option) {
// set selected property
option.selected = true;
// raise event on parent <select> element
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
option.parentNode.dispatchEvent(evt);
}
else {
option.parentNode.fireEvent("onchange");
}
}
// ################################################
// Setup our test case
// ################################################
(function setup() {
const sel = document.querySelector('#fruit');
sel.onchange = () => {
document.querySelector('#result').textContent = sel.value;
};
})();
function runTest() {
const sel = document.querySelector('#selector').value;
const optionEl = document.querySelector(sel);
triggerChangeEvent(optionEl);
}<select id="fruit">
<option value="">(select a fruit)</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="pineapple">Pineapple</option>
</select>
<p>
You have selected: <b id="result"></b>
</p>
<p>
<input id="selector" placeholder="selector" value="option[value='banana']">
<button onclick="runTest()">Trigger select!</button>
</p>