web-dev-qa-db-ja.com

chromeの選択オプション要素でイベントをクリックします

次のChromeに問題があります。

var items = $("option", obj);  

items.each(function(){

    $(this).click(function(){

        // alert("test");
        process($(this).html());
        return false;
    });
});

clickイベントはChromeで発生するようには見えませんが、Firefoxで機能します。

コンボのclick要素でoptionできるようにしたいのですが、代わりに別の種類の要素を使用する場合は、<li>と言います。何か案は？ありがとう。

jquerygoogle-chromeselect
61
Victor

クリックイベントがオプションで有効であるとは思わない。ただし、select要素では有効です。これを試してみてください：

$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});
80
Samantha Branham

<select>でイベントを直接呼び出すにもかかわらず、この他の方法を実現できます。

JSパーツ：

$("#sort").change(function(){

    alert('Selected value: ' + $(this).val());
});

HTMLパーツ：

<select id="sort">
    <option value="1">View All</option>
    <option value="2">Ready for Review</option>
    <option value="3">Registration Date</option>
    <option value="4">Last Modified</option>
    <option value="5">Ranking</option>
    <option value="6">Reviewed</option>
</select>
21
vivek sharma

選択を変更して更新する簡単な方法はこれです。

// BY id
$('#select_element_selector').val('value').change();

もう一つの例：

//By tag
$('[name=selectxD]').val('value').change();

もう一つの例：

$("#select_element_selector").val('value').trigger('chosen:updated');
8
DarckBlezzer

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

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

       //your code here

}));
5
Elina Lulle

似たような問題がありました。 changeイベントは、ユーザーがoptionをクリックしたときにいくつかのデータを更新する必要があるため、私にとっては良くありませんでした。いくつかの試行の後、私はこの解決策を持っています：

$('select').on('click',function(ev){
    if(ev.offsetY < 0){
      //user click on option  
    }else{
      //dropdown is shown
    }
});

これは非常に見苦しく、できる限りchangeイベントに固執する必要があることに同意しますが、これで私の問題は解決しました。

4
Halon
<select id="myselect">
    <option value="0">sometext</option>
    <option value="2">Ready for Review</option>
    <option value="3">Registration Date</option>
</select>

$('#myselect').change(function() {
    if($('#myselect option:selected').val() == 0) {
    ...
    }
    else {
    ...
    }
});
3
Artur Saidov

2つの部分からなるソリューションを使用します

  • パート1-通常の方法でクリックイベントをオプションに登録する
  • パート2-選択したアイテムが変更されたことを検出し、新しい選択したアイテムのクリックハンドラーを呼び出します。

HTML

<select id="sneaky-select">
  <option id="select-item-1">Hello</option>
  <option id="select-item-2">World</option>
</select>

JS

$("#select-item-1").click(function () { alert('hello') });
$("#select-item-2").click(function () { alert('world') });

$("#sneaky-select").change(function ()
{
   $("#sneaky-select option:selected").click();
});
1
Aaron Sherman

おそらく、新しいjqueryバージョンの1つは、オプションのクリックイベントをサポートしています。それは私のために働いた：

$(document).on("click","select option",function() {
  console.log("Nice to meet you, console ;-)");
});

更新：次のようなユースケースが考えられます。ユーザーがhtmlフォームを送信すると、値がデータベースに挿入されます。ただし、1つ以上の値がデフォルトで設定されており、この自動エントリにフラグを立てます。また、エントリが自動的に生成されることをユーザーに示しますが、すでに選択されているオプションをクリックしてエントリを確認すると、データベースのフラグが変更されます。まれなスーケースですが、可能性があります...

1
zuluk

$(this)はfunction() {}と同じthisを持たないES6矢印関数では正しくないため、ES6構文を使用する場合は$（this）を使用しないでください。
公式jQueryの anwser に加えて、トップアンサーの言うことを行う簡単な方法があります。
選択したオプションのhtmlを取得する最良の方法は、使用することです

$('#yourSelect option:selected').html();

html()をtext()または他の任意のものに置き換えることができます（ただし、html()は元の質問にありました）。
イベントリスナーchangeをjQueryの短縮形メソッドchange()とともに追加して、選択したオプションが変更されたときにコードをトリガーします。

 $ ('#yourSelect' ).change(() => {
    process($('#yourSelect option:selected').html());
  });

option:selected（ユーザーが選択したオプション）の値のみを知りたい場合は、$('#yourSelect').val()を使用できます。

0
Ilan Schemoul

このコードスニペットは、オプションのクリック（少なくともChromeおよびFF）を認識するために機能することを知っています。さらに、DOMロード時に要素が存在しなかった場合にも機能します。通常、入力のセクションを単一の選択要素に入力し、セクションのタイトルをクリックしたくないときに使用します。

$(document).on('click', 'option[value="disableme"]', function(){
    $('option[value="disableme"]').prop("selected", false);
});
0
Gwi7d31

回避策：

$('#select_id').on('change', (function() { $(this).children(':selected').trigger('click'); }));

0
JeanP

私にとって通常機能するのは、最初にドロップダウンの値を変更することです.

$('#selectorForOption').attr('selected','selected')

そして、変更をトリガーします

$('#selectorForOption').changed()

このように、に接続されているjavascript

0
pardahlman

2018年にこれを探します。Chromeでは、selectタグ内のoptionタグのクリックイベントは発生しません。

変更イベントを使用し、選択したオプションをキャプチャします。

$(document).delegate("select", "change", function() {
    //capture the option
    var $target = $("option:selected",$(this));
});

Selectタグが複数の場合、$ targetはオブジェクトのコレクションである可能性があることに注意してください。

0
Adrián Suarez Bais