web-dev-qa-db-ja.com

onclick on option tag on not IE and chrome

onclickボックスのオプションタグでselectイベントを使用しています

<select>
    <option onclick="check()">one</option>
    <option onclick="check()">two</option>
    <option onclick="check()">three</option>
</select>`

onclickイベントが動作していませんIE and Chromeしかし、Firefoxでは問題なく動作しています。ここではonchange selectタグbczのイベントユーザーが同じオプションを再度選択した場合、イベントをトリガーしません

たとえば、最初にユーザーが「1」ドロップダウンを選択すると、ユーザーがポップアップを閉じるものを処理した後にポップアップを開きますが、ユーザーが同じ「1」ドロップダウンを選択した場合、イベントはトリガーされません。これはonclickイベントを使用して解決できますオプションタグ上では動作しませんが、IE and chrome

このための回避策はありますか？

htmlhtml-select
25
Lohith MV

onclickタグのoptionイベントは、IE、Safari、Chromeのほとんどのバージョンで失敗します： reference

ユーザーが選択するたびにイベントをトリガーしたい場合は、単に使用しないでください：

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

そして、ユーザーが選択した特定のオプションで何かをしたい場合：

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

これにより、オプションが選択されている場合にのみ、check()を呼び出すことが保証されます。

編集：@ user422543がコメントで指摘したように、このソリューションはFirefoxでは機能しません。したがって、私はここで別の質問をしました： FirefoxがWebkitとIEで「select」タグの「click」イベントに対して異なる反応をするのはなぜですか？

これまでのところ、<select>タグの使用はすべてのブラウザで一貫して機能するとは限りません。ただし、 jQuery UI select menu または Chosen などのライブラリを使用して選択メニューをシミュレートし、<select>タグを使用する代わりに選択メニューを作成する場合、clickイベントは、テストしたすべてのブラウザで一貫性のある<ul>または<li>タグで発生します。

41
K Z

別の提案がありますが、それは100％ではありませんが、ほとんど：

<select onchange="valueChanged(this.value); this.selectedindex = -1">
    <option style="display: none"></option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
</select>

これにより、ユーザーが同じオプションを2回選択した場合でも、イベントがトリガーされます。ヒッチは、IEは空のオプションを表示します（style属性を無視します）が、クリックするとイベントは発生しません。常に選択された状態で開始されるため、選択すると表示されます。 onchangeをトリガーしない...

3
mamashare

これは、クリック数を記録することにより、onclicksのoptionイベントをエミュレートします。

http://jsfiddle.net/yT6Y5/1/

  • 最初のクリックは無視されます（ドロップダウンを展開するために使用されます）。
  • 2回目のクリックは、事実上「選択」です。 （クリック数がリセットされます）。

キーボード操作には対応していません...

ああ、私はJQueryを使用していますが、純粋なJSを使用してやり直すことができます

2
Greg

あなたはただする必要があります

  • 選択の上にスクリプトを配置し、
  • コードに示されているように、selectにonclickとonblurを設定します
  • チェック機能をカスタマイズします。

私はそれをテストしましたが、動作します:)。

<script>
    selectHandler = {
        clickCount : 0,
        action : function(select)
        {
            selectHandler.clickCount++;
            if(selectHandler.clickCount%2 == 0)
            {
                selectedValue = select.options[select.selectedIndex].value;
                selectHandler.check(selectedValue);
            }
        },
        blur : function() // needed for proper behaviour
        {
            if(selectHandler.clickCount%2 != 0)
            {
                selectHandler.clickCount--;
            }
        },
        check : function(value)
        {
            // you can customize this
            alert('Changed! -> ' + value);
        }
    }

</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
    <option value="value-1"> 1 </option>
    <option value="value-2"> 2 </option>
    <option value="value-3"> 3 </option>
    <option value="value-4"> 4 </option>
</select>
1
Michael

SelectタグのIDでfunction(this)を使用します

例えば

<script type="application/javascript">

var timesSelectClicked = 0;

$(function() {
    $(document).on('click keypress', 'select', function (e) {
        if (timesSelectClicked == 0)
        {
            timesSelectClicked += 1;
        }
        else if (timesSelectClicked == 1)
        {
            timesSelectClicked = 0;
            Prompt($('select option:selected').text());
        }
    });
});
</script>
0
kali doss

私は次のことがうまくいくことを発見しました-代わりにクリックで使用する代わりに、変更時に使用する：

jQuery('#element select').on('change',  (function() {

   //your code here

}));
0
Elina Lulle

このコードはGoogleでは動作していませんChromeですが、Mozillaでは動作しています。

<select>
    <option value="2" (click)="myFunction($event)">
     <div>2</div>
    </option>

    <option value="5" (click)="myFunction($event)">
     <div>5</div>
    </option>

   <option value="10" (click)="myFunction($event)">
    <div>10</div>
  </option>

</select>

このソリューションは、ChromeおよびMozillaで動作しています。Safariではテストしませんでした。

<select (change)="myFunction($event)">
    <option value="2">
     <div>2</div>
    </option>

    <option value="5">
     <div>5</div>
    </option>

   <option value="10">
    <div>10</div>
  </option>

</select>
0
OguzTR