0

select タグにバインドされた change イベントがあります。select タグの最初のオプションは、メニューのデフォルト テキストとして使用しているため、無効になっています。ユーザーが select タグをクリックし、オプションを選択せず​​にその上にカーソルを置いてから、選択メニューの外側を 2 回クリックすると、変更イベントが発生します。この変更イベントが発生しないようにするにはどうすればよいですか。

HTML

<select id="select">
    <option disabled="disabled" selected="selected">Title</option>
    <optgroup label="things">
        <option>cars</option>
        <option>boats</option>
        <option>world</option>
    </optgroup>
</select>

jQuery

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').change(function(){
    alert($(this).val());
});

コードは、私の問題の単なるサンプルです。ボタンを追加したのは、実際のコードでは、ユーザーが選択メニューの外側をクリックしたときに選択メニューを非表示にしているためです。

これは上記のコードのフィドルです。

編集

コメントを見ると、Internet Explorer、Chorme、および Safari で正常に動作するため、Firefox 固有の問題のようです。

4

1 に答える 1

1

選択の一部のデータを現在の値に関連付けて、実際に変更されたことを検証できます。

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').data('currVal', 'Title');
$('#select').change(function(){
    if($(this).val() != $(this).data('currVal') {
        // this is actual value change
        alert($(this).val());
        $(this).data('currVal', $(this).val());
    }
});

元のフィドルをソリューションで更新しました：

http://jsfiddle.net/TPpD6/4/

于 2012-12-14T23:35:11.700 に答える