![](/img/trans.png)
[英]Select (trigger change) the dynamically added option of a select dropdown in Javascript/jQuery
[英]Change <select>'s option and trigger events with JavaScript
如何使用 JavaScript(没有任何库,如 jQuery)更改 HTML <select>
的选项,同时触发与用户进行更改相同的事件?
例如,使用以下代码,如果我用鼠标更改选项,则会触发一个事件(即运行onchange
)。 但是,当我使用 JavaScript 更改选项时,它不会触发任何事件。 当使用 JavaScript 选择一个选项时,是否可以触发相关的事件处理程序,如onclick
、 onchange
等?
<select id="sel" onchange='alert("changed")'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true;' value="Change option to 2" />
不幸的是,您需要手动触发change
事件。 使用事件构造函数将是最好的解决方案。
var select = document.querySelector('#sel'), input = document.querySelector('input[type="button"]'); select.addEventListener('change',function(){ alert('changed'); }); input.addEventListener('click',function(){ select.value = 2; select.dispatchEvent(new Event('change')); });
<select id="sel" onchange='alert("changed")'> <option value='1'>One</option> <option value='2'>Two</option> <option value='3' selected>Three</option> </select> <input type="button" value="Change option to 2" />
当然,IE 不支持Event
构造函数。 所以你可能需要用这个 polyfill:
function Event( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
我的解决方案的小提琴在这里。 但以防万一它过期,我也会粘贴代码。
HTML:
<select id="sel">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" id="button" value="Change option to 2" />
JS:
var sel = document.getElementById('sel'),
button = document.getElementById('button');
button.addEventListener('click', function (e) {
sel.options[1].selected = true;
// firing the event properly according to StackOverflow
// http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
sel.dispatchEvent(evt);
}
else {
sel.fireEvent("onchange");
}
});
sel.addEventListener('change', function (e) {
alert('changed');
});
就这么简单:
var sel = document.getElementById('sel');
var button = document.getElementById('button');
button.addEventListener('click', function (e) {
sel.options[1].selected = true;
sel.onchange();
});
但是这种方式有问题。 您不能像使用普通函数那样调用事件,因为可能有多个函数在侦听一个事件,并且可以通过几种不同的方式设置它们。
不幸的是,触发事件的“正确方法”并不那么容易,因为您必须在 Internet Explorer(使用 document.createEventObject)和 Firefox(使用 document.createEvent("HTMLEvents"))中以不同的方式执行此操作
var sel = document.getElementById('sel');
var button = document.getElementById('button');
button.addEventListener('click', function (e) {
sel.options[1].selected = true;
fireEvent(sel,'change');
});
function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
试试这个:
<select id="sel">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" value="Change option to 2" onclick="changeOpt()"/>
<script>
function changeOpt(){
document.getElementById("sel").options[1].selected = true;
alert("changed")
}
</script>
整个创建和调度事件都可以工作,但是由于您使用了onchange
属性,您的生活可以简单一点:
http://jsfiddle.net/xwywvd1a/3/
var selEl = document.getElementById("sel");
selEl.options[1].selected = true;
selEl.onchange();
如果您使用浏览器的事件 API(addEventListener、IE 的 AttachEvent 等),那么您将需要创建和调度事件,正如其他人已经指出的那样。
您可以在更改 onclick 事件上的选定选项后手动触发事件: document.getElementById("sel").onchange();
这些问题可能与您的要求有关:
这是我的想法:您可以像这样在 onclick 事件中堆叠多个调用:
<select id="sel" onchange='alert("changed")'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true; alert("changed");' value="Change option to 2" />
您也可以调用函数来执行此操作。
如果你真的想调用一个函数并且两者都以相同的方式运行,我认为这样的事情应该可行。 它并没有真正遵循“函数应该做一件事并做好”的最佳实践,但它确实允许您调用一个函数来处理更改下拉列表的两种方式。 基本上我在 onchange 事件上传递 (value) 并在 onclick 事件上传递 (null, index of option)。
这是代码笔: http ://codepen.io/mmaynar1/pen/ZYJaaj
<select id="sel" onchange='doThisOnChange(this.value)'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" onclick='doThisOnChange(null,1);' value="Change option to 2"/>
<script>
doThisOnChange = function( value, optionIndex)
{
if ( optionIndex != null )
{
var option = document.getElementById( "sel" ).options[optionIndex];
option.selected = true;
value = option.value;
}
alert( "Do something with the value: " + value );
}
</script>
html 使用剃刀:
@Html.DropDownList("test1", Model.SelectOptionList, new { id = "test1", onchange = "myFunction()" })
JS代码:
function myFunction() {
var value = document.getElementById('test1').value;
console.log("it has been changed! to " + value );
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.