onchange動作が発生するようにselectをプログラムで変更するにはどうすればよいですか?
-
22-07-2019 - |
質問
これは機能していないようです:
<select id="mySel" onchange="alert('foo')">
<option value="a">a</option>
<option value="b">b</option>
</select>
<script>
dojo.byId('mySel').value = 'b'; // select changes, but nothing is alerted
</script>
(私はdojoを使用していますが、それは実際には重要ではありません。)
解決
「変更」という名前は、変更イベントと変更される値が同じものではないことを理解しない限り、少し誤解を招く恐れがあります。ユーザーがブラウザで値を変更すると、変更イベントが発生します。ただし、プログラムで値を変更した後に dojo.byId( 'mySel')。onchange()
を呼び出すことで、手動でイベントを起動できると思います。 (ただし、実際には alert
を呼び出す関数を定義する必要があるかもしれません。私はまだこれをしていません。)
他のヒント
これにより、値は変更されますが、onchangeイベントは発生しません。 JavaScriptを使用して要素を変更すると、イベントは発生しません(再帰の問題に陥るのを防ぎます*)。
そのようなイベントハンドラを設定した場合。
function myHandler(){
//do whatever stuff here
changeColor( dojo.byId('mySel') );
}
プログラムで値を設定した後、これを個別に呼び出すことができます。
注(*):私は道場の専門家ではありません...だから、彼らは「追加」していないと思います。 JavaScriptから値を設定する際のイベントハンドラーの自動呼び出し。
これらの質問とその回答をご覧ください。役立つかもしれません:
- html選択ボックスでプログラムの変更を検出します。
- プログラムでonchangeを強制する方法入力でのイベント?(選択ではなく入力に焦点を当てていますが、まだ有用かもしれません)
javascriptを使用して change
イベントをトリガーしたい方のために。
var evObj = document.createEvent("HTMLEvents");
evObj.initEvent("change", true, true);
var elem = document.getElementById('some-id');
elem.dispatchEvent(evObj);
イベント 'onpropertychange'にアクセスすると、イベント引数内にプロパティが含まれ、どのプロパティが変更されたかを特定できます。
「selectedIndex」と「value」の両方の変更を検出します-単に「propertyName」をテストします
<select id="mySel" onpropertychange="dothis(event);">
<option value="a">a</option>
<option value="b">b</option>
</select>
function dothis(event)
{
if (event.propertyName == "selectedIndex")
alert('selection changed');
}
私の頭の上から...(現在はかなり異なるasp.net jsフレームワークを使用しています)
代わりにselectedIndexを割り当ててみてください。