JavaScript onchange event не будет срабатывать, если выбран вариант с другими методами

Question

У меня есть элемент select и button.

Когда параметр из выбранного элемента изменяется, она вызывает некоторую функцию:

<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() только вызывал при изменении параметра от самого выбора элемента, а не при нажатии кнопки.

То, что я пытаюсь сделать, - это активировать событие onchange для выбора, независимо от того, где этот параметр изменяется.

Я знаю, что могу добавить someFunction() к событию onclick, но это не то, что я ищу.

Любые идеи будут оценены.

Answer 1

Вы можете добавить событие-слушателя, когда DOM нагрузки, СОУ вы получите отзывом события каждый раз, когда он стрелял «программно» и нет «вызовы событий» внутри соответствующего элемента теги, принося вам более чистый код.

Выполнить этот пример, надеюсь, что это помогает:

// 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!'); 
 
}

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

Вы можете увидеть больше в: 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();"/>