61

私は次のマークアップを持っています：

<select onchange="jsFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

ユーザーがコンボボックスをプルダウンして、以前に選択されたものと同じオプションを選択した場合（または選択をまったく変更しない場合）、JavaScriptはそれをonchangeイベントとは見なしません。したがって、jsFunction()は呼び出されません。jsFunction()でもこの場合でも呼ばれたいです。どうすればこれを達成できますか？

4

8 に答える 8

79

私は次のようにします：

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

必要に応じて、最初のオプションと同じラベルを付けることができます。この場合は 1 です。さらに良いのは、ボックス内の選択肢にラベルを付けることです。

于 2012-08-09T06:04:09.443 に答える
24

それを解決するには、空のオプションを追加する必要があります。

もう1つの解決策を提供することもできますが、それはあなた次第です.jsFunction以外のオプションを選択した後、ユーザーはデフォルトオプションを選択するため、2回呼び出されます。

<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);
}
于 2012-08-09T06:36:56.883 に答える
2

これを試して。空のオプションを追加するだけです。これはあなたの問題を解決します。

<select onchange="jsFunction()">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>​
于 2012-08-09T06:03:01.610 に答える
1

JavaScript コード:

  • mousedown イベント時: selectedIndex プロパティの値を -1 に設定します
  • on change イベント: ハンドル イベント

唯一の欠点は、ユーザーがドロップダウン リストをクリックしたときに、現在選択されている項目が選択されていないように見えることです。

于 2015-03-04T07:52:55.843 に答える
1

各オプション要素で「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>
于 2013-08-28T06:10:04.390 に答える
0

値が「変更」されていないため、発火していません。同じ値です。change残念ながら、イベントを使用して目的の動作を実現することはできません。

ユーザーが選択ボックスを離れたときに、blurイベントを処理し、必要な処理を行うことができます。そうすれば、ユーザーが同じ値を選択した場合でも、必要なコードを実行できます。

于 2012-08-09T06:09:01.763 に答える