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

<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>単なるアイデアですが、各要素に onclick を配置することは可能ですか?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</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>

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

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

残念ながら、onclickは複数回実行され（たとえば、selectのonpening...およびselection/ closeの場合）、何も変更されないときに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 を組み合わせて使用​​する必要がある場合があります。

同様の問題に直面したときに私がしたことは、選択ボックスに「onFocus」を追加して、新しい一般的なオプション（「オプションを選択」または同様のもの）を追加し、デフォルトで選択したオプションとして設定することです。

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

試す：

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

私にとってはまともに働いた。

したがって、私の目標は、同じ値を複数回選択できるようにすることでした。これにより、本質的に 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/

これが私の解決策であり、ここにある他のものとは完全に異なります。ドロップダウンを開くために選択ボックスをクリックするのではなく、オプションがクリックされたかどうかを判断するためにマウスの位置を使用します。これは唯一の信頼できるクロスブラウザ変数であるため、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");
});

これが私のjsFiddlehttp : //jsfiddle.net/sU7EV/4/です

私のために働くもの：

<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

jquery を使用します。

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

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

使ってみるべきですoption:selected

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

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>

ここで実際に行っているのは、onchangeイベントが常にトリガーされるように、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>

ずいぶん前ですが、元の質問への回答として、これは役に立ちますか? onClickラインに入れるだけSELECT。OPTION次に、それぞれがやりたいことをOPTION行に入れます。すなわち:

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

これを試して：

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

要素がフォーカスを得たときに 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('');
    }
});

もう 1 つの解決策は、onMouseUp イベントを使用することです。OnMouseUp は、同じオプションを再選択したり、オプションを変更したりしても機能します。

デメリットばかり。このコードは、ドロップダウン ボックスが openemd のときに呼び出され、2 回目は選択が行われたときに呼び出されます。AJAX リクエストについては、この点に注意してください。これがロジックに害を及ぼさない場合は、単純なインライン ハックとして使用できます。

<select id="bla" onmouseup="console.log( document.getElementById('bla').options[document.getElementById('bla').selectedIndex].value );">
  <option value="0">A</option>
  <option value="1">B</option>
</select>

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

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

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

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

私にとってうまくいった唯一の解決策は、「onFocus」イベントでSELECTを完全にリセットすることでした。このように、SELECT は常に「onChange」イベントで「変更」されます。

$('select').on('focus', function(ev) {
    var $select = $(this);
    var options = $select.html();
    $select.empty();
    $select.append(options);
});

$('select').on('change', function(ev) {
    // Now the select element ALWAYS fires onChange
});

onChange を使用できます: http://www.w3schools.com/TAGS/tag_Select.asp

http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.htmlからコピー onChange は、ユーザーがオプションの 1 つを選択したときに実行する JavaScript を指定します。これは、「送信」ボタンが押されたときではなく、ユーザーが項目を選択するとすぐにアクションが開始されることを意味します。