HTML <select>のonSelectイベントまたは同等のものはありますか？

複数のオプションから選択できる入力フォームがあり、ユーザーが選択を変更したときに何かを実行します。例えば、

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

現在はdoSomething()、選択が変更されたときにのみトリガーされます。

doSomething()ユーザーがオプションを選択したときにトリガーしたいのですが、おそらく同じオプションをもう一度選択します。

「onClick」ハンドラーを使用しようとしましたが、ユーザーが選択プロセスを開始する前にトリガーされます。

それで、ユーザーが選択するたびに関数をトリガーする方法はありますか？

更新：

ダリルが提案した答えは機能するように見えましたが、一貫して機能しません。ユーザーが選択プロセスを完了する前であっても、ユーザーがドロップダウンメニューをクリックするとすぐにイベントがトリガーされることがあります。

最も簡単な方法は次のとおりです。

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

選択がフォーカスされている場合は、マウス選択とキーボードの上下キーの両方で機能します。

まったく同じものが必要でした。これは私のために働いたものです：

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

これをサポートします：

ユーザーがオプションを選択したとき、おそらく同じオプションをもう一度選択したとき

数ヶ月前にデザインを作成していたときにも同じ問題がありました。私が見つけた解決策は、あなたが使用.live("change", function())し.blur()ている要素と組み合わせて使用することでした。

あなたは、ユーザーが簡単にクリックしたときに、それは何かを持っているしたい場合は、代わりに変更するので、ちょうど交換してくださいchangeとclick。

ドロップダウンにIDを割り当て、selected以下を使用しました。

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

これには選択された回答がないことがわかりましたので、私は自分の入力を提供すると思いました。これは私にとってはうまくいったので、うまくいけば、誰かがこのコードを使ってうまくいけばいいのですが。

http://api.jquery.com/live/

編集：ではなくonセレクタを使用し.liveます。jQuery .on（）を参照してください

単なるアイデアですが、各<option>要素にオンクリックを置くことは可能ですか？

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

別のオプションは、selectでonblurを使用することです。これは、ユーザーが選択から離れてクリックするたびに発生します。この時点で、選択されたオプションを判別できます。これを正しいタイミングでトリガーするには、オプションのonclickでフィールドをぼかすことができます（他のものをアクティブにするか、jQueryの.blur（）だけにします）。

onclickアプローチは完全に悪いわけではありませんが、前述のように、値がマウスクリックで変更されない場合はトリガーされません。
ただし、onchangeイベントでonclickイベントをトリガーすることは可能です。

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>

jitbitの答えを拡張します。ドロップダウンをクリックしてから、何も選択せずにドロップダウンをクリックしたときに、それが変だとわかりました。最終的には次のようになりました。

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
}; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

これは、ユーザーにとって少し意味があり、以前のオプションを含むオプションを選択するたびにJavaScriptを実行できるようにします。

このアプローチの欠点は、ドロップダウンにタブで移動し、矢印キーを使用して値を選択する機能がなくなることです。すべてのユーザーが永遠の終わりまでいつでもすべてをクリックするので、これは私には受け入れられました。

これがこのように機能するために本当に必要な場合は、これを行います（キーボードとマウスで機能することを確認するため）

• onfocusイベントハンドラをselectに追加して、「現在の」値を設定します
• onclickイベントハンドラーを選択に追加して、マウスの変更を処理する
• onkeypressイベントハンドラーを選択に追加してキーボードの変更を処理する

残念ながら、onclickは複数回実行され（たとえば、選択のオンペン時および選択/クローズ時）、何も変更されないときにonkeypressが起動する場合があります...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

ユーザーが何かを選択するたびに（同じオプションであっても）イベントを適切に起動するには、選択ボックスをだます必要があります。

他の人が言っselectedIndexたように、変更イベントを強制するためにフォーカスに否定を指定します。これにより、選択ボックスをだますことができますが、フォーカスがある限り、その後は機能しません。簡単な修正は、以下に示すように、選択ボックスを強制的にぼかすことです。

標準のJS / HTML：

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

jQueryプラグイン：

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

ここで動作するデモを見ることができます。

実際、ユーザーがキーボードを使用して選択コントロールの選択を変更しても、onclickイベントは発生しません。必要な動作を実現するには、onChangeとonClickの組み合わせを使用する必要がある場合があります。

これはあなたの質問に直接答えないかもしれませんが、この問題は簡単な設計レベルの調整で解決できます。これがすべてのユースケースに100％当てはまるわけではないことを理解していますが、アプリケーションのユーザーフローを再考し、次の設計提案を実装できるかどうか検討することを強くお勧めします。

私は選択肢をハッキングよりも、何かを簡単に行うことを決めonChange()、実際にこの目的のために意味されなかった他のイベントを使用して（blur、clickなど）

私がそれを解決した方法：

値のないselectなどのプレースホルダーオプションタグを単に付加するだけです。

したがって、次の構造を使用する代わりに、hack-yの代替案が必要になります。

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

これを使用することを検討してください：

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

したがって、このようにすると、ユーザーのコードがよりシンプルになりonChange、ユーザーがデフォルト値以外のものを選択するたびに、コードは期待どおりに機能します。disabledもう一度選択させたくない場合は、最初のオプションに属性を追加して、オプションから何かを強制的に選択させて、onChange()火災を引き起こすこともできます。

この回答の時点で、私は複雑なVueアプリケーションを作成していますが、この設計の選択によってコードが大幅に簡略化されたことがわかりました。この問題を解決するまでこの問題に何時間も費やしましたが、コードの多くを書き直す必要はありませんでした。ただし、ハックな代替案を使用した場合、ajaxリクエストの二重発火などを防ぐために、エッジケースを考慮する必要がありました。これも、デフォルトのブラウザ動作を素晴らしいボーナスとして台無しにしない（モバイルでテスト済み）ブラウザも同様です）。

場合によっては、一歩下がって最も簡単なソリューションの全体像を考える必要があるだけです。

同様の問題に直面したときに私が行ったのは、選択ボックスに「onFocus」を追加して、新しい汎用オプション（「オプションの選択」または類似のオプション）を追加し、それをデフォルトで選択オプションにしたことです。

したがって、私の目標は、同じ値を複数回選択できるようにすることでした。これにより、本質的にonchange（）関数が上書きされ、便利なonclick（）メソッドに変換されます。

上記の提案に基づいて、私はこれが私にとってうまくいくことを思いつきました。

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/

まず最初に、イベントハンドラーとしてonChangeを使用し、次にフラグ変数を使用して、変更を行うたびに必要な機能を実行させます。

<select

var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}

<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>

列のヘッダーのように、最初のオプションとして追加オプションを追加します。これは、クリックする前のドロップダウンボタンのデフォルト値になり、の最後でリセットされるdoSomething()ため、A / B / Cを選択すると、onchangeイベントが常にトリガーされます。選択がの場合、State何もせずに戻ります。onclick以前に多くの人々が述べたように非常に不安定です。したがって、必要なのは、実際のオプションとは異なる初期ボタンラベルを作成して、onchangeがどのオプションでも機能するようにすることです。

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

（このシナリオの）selectタグのすばらしい点は、オプションタグから値を取得することです。

試してください：

<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>

私のためにまともな仕事をした。

jqueryを使用してください：

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>

ここに私の解決策がありますが、ここの他のものとはまったく異なります。マウスの位置を使用して、選択ボックスをクリックしてドロップダウンを開くのではなく、オプションがクリックされたかどうかを判断します。これはevent.screenYの位置を使用します。これは、信頼できる唯一のクロスブラウザー変数であるためです。ホバーイベントを最初にアタッチして、クリックイベントの前に画面に対するコントロールの位置を把握できるようにする必要があります。

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

ここに私のjsFiddle http://jsfiddle.net/sU7EV/4/があります

あなたは使ってみるべきです option:selected

$("select option:selected").click(doSomething);

私のために働くもの：

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

このようにして、オプションが変更されると、onchangeは 'doSomething（）'を呼び出し、onchangeイベントがfalseの場合、つまり同じオプションを選択すると、onclickは 'doSomething（）'を呼び出します。

これを試してください（オプションを選択したときに、オプションを変更せずにトリガーされるイベント）：

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4

<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

ここに返されたインデックスがあり、jsコードではこのスイッチを1つのスイッチまたは必要なもので使用できます。

これを試して：

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

ずっと前のことですが、元の質問に答えて、これは役に立ちますか？ちょうど入れonClickにSELECT行。次に、それぞれOPTIONに何をしてほしいかをOPTION行に入れます。つまり：

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>

<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

私は同様の必要性に直面しており、同じためにangularjsディレクティブを作成してしまいました-

guthubリンク-角度選択

element[0].blur();selectタグからフォーカスを削除するために使用されます。ロジックは、ドロップダウンの2回目のクリックでこのブラーをトリガーすることです。

as-select ユーザーがドロップダウンで同じ値を選択した場合でもトリガーされます。

デモ- リンク

1つの真の答えは、選択フィールドを使用しないことです（同じ答えを再選択するときに何かを行う必要がある場合）。

従来のdiv、ボタン、表示/非表示メニューでドロップダウンメニューを作成します。リンク：https : //www.w3schools.com/howto/howto_js_dropdown.asp

イベントリスナーをオプションに追加できれば、回避できたはずです。select要素のonSelectリスナーがあった場合。また、選択フィールドをクリックしてもマウスダウン、マウスアップ、およびマウスダウンで同時にすべてが激しくオフにならない場合。

同じオプションが再度選択された場合でも、古い値を記憶し、onchangeイベントをトリガーすることを確認するために、ここで実行することがいくつかあります。

最初に必要なのは、通常のonChangeイベントです。

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

同じオプションが再度選択された場合でもonChangeイベントをトリガーするには、ドロップダウンが無効な値に設定することでフォーカスを受け取ったときに、選択されたオプションの設定を解除できます。ただし、ユーザーが新しいオプションを選択しない場合に備えて、以前に選択した値を保存して復元することもできます。

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

上記のコードを使用すると、同じ値が選択されている場合でもonchangeをトリガーできます。ただし、ユーザーが選択ボックスの外側をクリックした場合は、以前の値に戻す必要があります。私たちはonBlurでそれを行います：

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

イベントハンドラーはIEのOPTIONタグではサポートされていないことに注意してください。簡単に考えると、この解決策が思いついたので、試してフィードバックを送ってください。

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

ここで私が実際に行っているのは、selectインデックスをリセットして、onchangeイベントが常にトリガーされるようにすることです。クリックすると選択したアイテムが失われ、リストが長い場合は煩わしいかもしれませんが、何らかの形で役立つ場合があります..

要素がフォーカスを取得したときに、selectの値を変更する方法については、たとえば（jqueryを使用して）：

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});

私はこの解決策を見つけました。

最初に選択要素のselectedIndexを0に設定します

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

このメソッドをonChangeイベントを呼び出す