Question

我有一个select元素和一个button。

当select元素的选项改变时，它会唤起一些功能：

<select id="mySel" onchange="someFunction();">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    ...
</select>

<input type="button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;"/>

仅当我从select元素本身更改选项时才会引发

someFunction()，而不是在我单击按钮时。

我要做的是让select元素onchange事件触发，无论选项何时被更改。

我知道我可以在按钮onclick事件中添加someFunction()，但这不是我正在寻找的。

任何想法将不胜感激。

Answer 1

你可以在DOM加载时添加一个事件监听器，每当它被解雇时你都会得到事件回调＆＃34;以编程方式＆＃34;没有＆＃34;事件电话＆＃34;在各个元素标签内，为您带来更清晰的代码。

运行此示例，希望它有所帮助：

＆＃13;

// Wait for WINDOW LOAD
window.onload = function() {
  // - Bind onchange event listener to the <select> DOMNode
  // - Your "someFunction" function is fired here!
  document.getElementById('mySel').addEventListener('change', someFunction); 
  
  // Trigger the change from the '#your_button' click callback
  document.getElementById('your_button').addEventListener("click", function () {
    // Create a new 'change' event
    var event = new Event('change');
    // Dispatch it
    document.getElementById('mySel').dispatchEvent(event);
  });
}

// Your function - Look at the console
function someFunction() {
  console.log('here!'); 
}

＆＃13;

<select id="mySel">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

<input type="button" id="your_button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;"/>

＆＃13;

您可以在Select Tag Change Event Call on Selected Index Change

中查看更多相关信息

Answer 2

更改按钮html。

<input type="button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;someFunction();"/>

或者根据评论中提到的链接手动触发更改事件。

Answer 3

使用它你就可以得到你想要的东西。

function someFunction(select){
  console.log('reached here');
  
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="mySel" onchange="someFunction();">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    ...
</select>

<input type="button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;someFunction();"/>

如果从其他方法更改select选项，则不会触发JavaScript onchange事件

3 个答案: