web-dev-qa-db-ja.com

HTML SELECT-オプションが変更されていない場合でもJavaScript ONCHANGEイベントをトリガーします

次のマークアップがあります。

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

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

javascripthtml-select
55
Dilip Raj Baral

私はこのようにします：

<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）を使用できます。さらに良いのは、ボックス内の選択項目にラベルを付けることです。

75
Simon Aronsson

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

また、もう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);
}
22
gaurang171

各オプション要素で「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>
1
eamyx

処理イベントの最後のステップとして、関連する<select>タグのselectIndexを-1に設定するだけです。

mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;

毎回機能し、ハイライトを削除して、同じ（または異なる）要素を再度選択できるようにします。

1
user6132740

JavaScriptコード：

  • mousedownイベント：selectedIndexプロパティ値を-1に設定
  • 変更イベント時：イベントの処理

唯一の欠点は、ユーザーがドロップダウンリストをクリックしても、現在選択されているアイテムが選択された状態で表示されないことです。

1
figolu

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

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

0
Strelok

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

<select onchange="jsFunction()">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>​
0
Praveen Singh