I次のマークアップがあります。ユーザーがコンボボックスをプルダウンし、以前に選択した同じオプションを選択するとHTML SELECT - オプションを変更しなくても、トリガーJavaScriptのonChangeイベント
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
を（またはdoesnの」 t）は、すべての選択を変更、JavaScriptはonchangeイベントとしてそれを考えていません。したがって、jsFunction()は呼び出されません。しかし、この場合でもjsFunction()が呼び出されます。どうすればこれを達成できますか？
私はこのようにそれを行うだろう：あなたがしたい場合は、この場合にはさらに良い1 で最初のオプションとして、同じラベルを持つことができ
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
：ラベルを置きます箱の中の選択のためにそこに。
そして、私がコンボボックスを見せたら、** selecedIndex **を0に設定しました。 –
良い解決策@サイモン。 –
はこれを試してみてください。空のオプションを追加するだけです。これはあなたの問題を解決します。
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
これは、選択可能な上に空のボックスを作成します。非常に良い解決策ではありません。 –
が最初のオプションとして機能します。他のオプションが選択され、再びユーザが同じオプションを選択すると、 –
値が「変更」されていないので、それは発射いません。それは同じ値です。残念ながら、changeイベントを使用して目的の動作を達成することはできません。
ユーザーはblurイベントを処理し、ユーザーが選択ボックスを離れるときに必要な処理を実行できます。そうすれば、ユーザーが同じ値を選択しても必要なコードを実行できます。あなたはそれを解決するために、空のオプションを追加する必要が
実際、このような状況です。 私はコンボボックスを持っています。任意のオプションを選択すると、コンボボックスが非表示になり、コンボボックスの値がCHANGEオプションのLABELとして表示されます。 CHANGEをクリックすると、再びコンボボックスが表示されます。 –
@ RajBD、ええ、あなたは 'ぼやけ 'を処理せずに、更新を選択したままにすることはできません。しかし、これはマイナーな使い勝手の問題です。あなたが「キャンセル」する明示的なオプションを与えると、それを表示しているときに選択ボックスの隣に「キャンセル」リンクを置くことによって、より良いことだと思います。 – Strelok
、
また、私はあなたにあなたのことをもう一つの解決策が、そのアップを与えることができますjsFunction以外のオプションを選択した後、ユーザーがデフォルトのオプションを選択しているので、あなたのための罰金かではないでしょう二度呼ばれる。
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}
私は前にONCLICKを試しました..すべてのブラウザで動作しません。特にChrome。 –
各オプション要素に "onmouseup"プロパティを使用します。それは冗長ですが、うまくいくはずです。また、番号をと仮定すると、ハンドラに重要であり、あなたの関数が実際にやっている、あなたは少し違っを手配できるものに応じて：
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>
これは動作します：
<select name="type" onmousedown="this.value='';" onchange="alert('Changed.');">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
<option value='4'>Four</option>
<option value='5'>Five</option>
<option value='6'>Six</option>
<option value='7'>Seven</option>
<option value='8'>Eight</option>
<option value='9'>Nine</option>
<option value='10'>Ten</option>
</select>
これは動作しません – smartmouse
@smartmouseそれはGoogle Chromeの最新バージョンで動作します – Ben
のJavaScriptコード：
マウスダウンイベントに唯一の欠点は、ユーザーがドロップダウンリストをクリックすると、現在選択されているアイテムは、このよう
を選択表示されていないことです。
第1位は「空」です。
<option></option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
これは、JavaScript変更イベントの動作に関する質問された質問に対する回答ではありません。 – Carpetsmoker
はちょうどあなたの処理イベントの最後のステップとして-1に関連する<select>タグのselectIndexを設定します。
ハイライトを削除して、同じ（または別の）要素を再度選択できるようにするたびに機能します。
通常、この動作が必要なときは、デフォルトでは値のない余分なエントリを追加し、イベントハンドラではそれが選択されているかどうかを確認し、そうであれば何もしません。 – Geoffrey
@Geoffrey私はそれもそう思いました。それはまた別の問題を引き起こす。どのように私は動的に（JavaScriptを使用して）希望のオプション（この場合は値なしのエントリ）を選択しますか？ –