3

わかりました、これは非常に簡単に聞こえます!! しかし、それは私を夢中にさせ、脳を衰弱させます:)

次のような基本的な選択ボックスがあるとします。

<select id="test">
    <option value="">--- select ---</option>
    <option value="1">One</option>
    <option value="1">Two</option>
</select>

私が望むのは、次の状態で「ハイライト」クラスを選択に追加することです。

  1. 選択はドロップダウン/オープン状態にあります
  2. 選択には有効なオプションが選択されています (つまり、1 つまたは 2 つ)

ただし、選択が有効な選択なしで閉じられた場合 (つまり、「--- select ---」に戻された場合) は、クラスを削除する必要があります。

簡単ですね!!

私はこれを試しましたが、これは明らかな方法のようでした：

$(document).ready(function () {

    $('#test').focus(function () {
        $(this).addClass('highlight');
    })

    $('#test').change(function () {
        if ($(this).val() != '') $(this).addClass('highlight');
        else $(this).removeClass('highlight');
    })
});

しかし、それは完全に100％機能するわけではありませんが、近いです。問題は、何かを選択してから「---選択---」に戻すと、ドロップダウンのフォーカスが失われず、再クリックすることですその後、「ハイライト」クラスを再度追加しません。

クリックなどの追加イベントを追加する多くの組み合わせを試しましたが、希望どおりに機能させることができないようです。選択時に「オープニング」イベントが必要なようですが、明らかにそれは存在しません。

ここで重大なことを見逃していませんか？私はこれを行うために数時間を費やした有能なWeb開発者です!! ハハ...でも、ここNZではかなり遅いので、私が持っているならそれは私の言い訳です:)

ありがとう、カール

4

1 に答える 1

2 
$('select').on('focus', function() {
    $(this).addClass('highlight').find('option').css('color', '#000');
}).on('blur', function() {
    $(this).removeClass('highlight');
    if (this.value.length) $(this).addClass('highlight');
}).on('change', function() {
    if (this.value.length) $(this).addClass('highlight');
    else $(this).removeClass('highlight')
});​
​

デモ

于 2012-05-15T10:57:29.483 に答える