選択肢が他の方法から変更された場合、JavaScript onchangeイベントは発生しません

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

someFunction()

私はselect要素自体からオプションを変更したとき、私はボタンをクリックしないとき喚起だけさ。

私がしようとしているのは、オプションが変更されている場所に関係なく、選択要素onchangeイベントを発生させることです。

ボタンのonclickイベントにsomeFunction()を追加することができますが、それは私が探しているものではありません。

アイデアをお寄せいただきありがとうございます。

Answer 1

あなたは、イベントリスナーを追加することができますタグを使用して、よりクリーンなコードを提供します。

実行この例で、それが役に立てば幸い：

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

これを使用すると、必要なものを手に入れることができます。 DOMがロードされたら、イベントコールバックにそれは「プログラム的に」発射だ毎回それぞれの要素の内部には、「イベントの呼び出し」を取得しますSOUとき

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