0

私はselectそれにいくつかの値を持つ を持っています。各値は異なる Web ページを読み込みます。

常に表示されるデフォルト値を「ページを選択」にしたい。

ユーザーがドロップダウンをクリックしたときに、現在のページのオプションを強調表示するにはどうすればよいですか?

ハイライトとは、それを選択するか、背景色などを変更することを意味します。

HTML:

<select id="siteId" name="siteId" onchange=".....">
    <option value="">Select a page</option>
    <option row="1" value="68067">MAIN SITE</option>
    <option row="2" value="88616">A</option>
    <option row="3" value="88617">B</option>
</select>

編集:この選択は動的に作成されます。ページがレンダリングされた後、java-scriptでのみ編集できます

4

4 に答える 4

1

:eq()jQuery ソリューションを探している場合は、探すのがattribute selector最善の策です。私は何かをしました: http://jsbin.com/ojexuh/1/edit

最初に:eq()

$('select option:eq(2)').css({"background":"green", "color":"white"});

そしてattribute selectorこのように：

$('select option[row="1"]').css({"background":"red", "color":"yellow"});
于 2012-12-05T16:32:45.747 に答える
1

これに対するブラウザと OS のサポートには多くのばらつきがあります。Chrome を例にとると、ドロップダウンは OS X ではスタイルを受け入れないように見えますが、Windows では、スタイルシートとインライン スタイル属性の両方で背景色を割り当てることができます。

<style type='text/css'>
    .highlighted {
        background-color: yellow;
    }
</style>

<select name='whatever'>
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3' style='background-color: green;'>three</option>
    <option value='4' class='highlighted'>four</option>
</select>

繰り返しますが、どちらの方法も Windows では機能しますが、OS X では機能しません。

どこでも機能するソリューションが必要な場合は、独自のドロップダウン コントロールを構築する必要があります。

于 2012-12-05T16:25:42.873 に答える
1

optionは 内の背景色をサポートしていますselect。here で見られるように、それを強調表示する単純なクラスを設定しました。

このようなクラスを追加できます

$('current page selector').addClass('current');

css関数を使用して手動で設定することもできます

$('current page selector').css('background-color', 'red');

現在のページを見つける方法を判断するのに役立つ十分な情報がありません。optionの値から、現在の と比較できる何らかの方法を用意することをお勧めしますwindow.location。

于 2012-12-05T16:22:04.483 に答える
0

デフォルトにしたいオプションに selected="selected" を設定します。

<option row="3" value="88617" selected="selected">B</option>
于 2012-12-05T16:20:17.533 に答える