改变<；选择>'；s选项并使用JavaScript触发事件

如何使用JavaScript（没有任何像jQuery这样的库）更改HTML

的选项，同时触发与用户更改相同的事件

例如，使用以下代码，如果我用鼠标更改选项，则会触发一个事件（即运行

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" />

一个
两个
三

---

您可以在更改onclick事件上的所选选项后手动触发事件，方法是：

document.getElementById（“sel”）.onchange（）
尝试以下操作：

<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>


一个
两个
三
函数changeOpt（）{
document.getElementById（“sel”）.options[1]。selected=true；
警报（“已更改”）
}
这些问题可能与您的要求有关：





以下是我的想法：您可以在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，选项索引）

这是代码笔：


一个
两个
三
doThisOnChange=函数（值，选项索引）
{
if（optionIndex！=null）
{
var option=document.getElementById（“sel”）.options[optionIndex]；
option.selected=true；
value=option.value；
}
警惕（“用值做某事：“+value”）；
}
我的解决方案很简单。但万一过期，我也会粘贴代码

HTML:

就这么简单:

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”））中以不同的方式进行触发

不幸的是，您需要手动触发
change
事件。而使用最简单的方法将是最好的解决方案


var select=document.querySelector（'sel'），
input=document.querySelector（'input[type=“button”]”）；
select.addEventListener（'change'，function（））{
警报（“更改”）；
});
input.addEventListener（'click'，function（）{
选择.value=2；
选择.dispatchEvent（新事件（'change'））；
});

一个
两个
三
整个创建和分派事件都是有效的，但由于您使用的是
onchange
属性，您的生活可能会简单一些：


如果您使用浏览器的事件API（addEventListener、IE的AttachEvent等），那么您将需要像其他人已经指出的那样创建和发送事件。
html使用Razor:

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

但是你想触发onchange事件吗？你可以在选择选项的地方做同样的事情。这是另一个假的解决方案。如果有人在
select
元素的
onchange
上附加了很多处理程序，会怎么样？这项工程将如何进行？有一件事是可以肯定的，它不会触发它们中的任何一个…只有在设置了
onchange
属性时，而不是使用内联处理程序时，它才起作用（有一些限制）。此外：
button.addEventListener（'click'，function（e）{sel.options[1].selected=true；/*由于ie9是可能的，因此对于ie8及以下版本，您需要添加一些hack*/sel.dispatchEvent（new CustomEvent（'change'）；}）谢谢Karol Angular中的“createEvent”路径也适用于IE11:-）如果我再次选择相同的选项会怎么样。它不会再次触发更改事件；它不会着火。您知道为什么吗？对于React开发人员，您必须使用新事件（'input'，{bubbles:true}）。气泡：true对于将事件传播到React的事件处理层至关重要。React/electron中存在此问题。这个答案的最后一部分是唯一对我有效的修复！非常感谢。
var sel = document.getElementById('sel');
var button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;
    sel.onchange();
});

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

var selEl = document.getElementById("sel");
selEl.options[1].selected = true;
selEl.onchange();

 @Html.DropDownList("test1", Model.SelectOptionList, new { id = "test1", onchange = "myFunction()" })

function myFunction() {

            var value = document.getElementById('test1').value;

            console.log("it has been changed! to " + value );
        }