5

この単純なhtmlを考えると、

<select id="ddl">
    <option style="background:#0f0">a</option>       
    <option style="background:#f00;">b</option>   
    <option>c</option>
</select>

（http://jsfiddle.net/DxK47/）各オプションには独自の背景色があることがわかります。

残念ながら、どのオプションを選択しても（ドロップダウンリストが「閉じる」）、背景は白のままになります（またはページのデフォルトが何であれ）。

選択が行われた後、選択されたアイテムの背景をドロップダウンリストに表示することは可能ですか（理想的にはjavascriptを使用せずに）

4

5 に答える 5

3

はい、可能です

JS:

$(function(){
    $("#ddl").on("change", function(){
        $("#ddl").css("background", $("#ddl option:selected").attr("style").replace("background:",""));
    });       
});

jsfiddle: http://jsfiddle.net/SnakeEyes/DxK47/3/

;2番目のオプションからを削除します

<option style="background:#f00;">b</option>

に

<option style="background:#f00">b</option>

その他の解決策: http://jsfiddle.net/SnakeEyes/DxK47/13/

于 2012-09-26T12:35:23.653 に答える
2

Chosenライブラリを使用してそれを行うことができます

Chosen は、長くて扱いにくい選択ボックスをより使いやすくする JavaScript プラグインです。現在、jQuery と Prototype の両方のフレーバーで利用できます。

于 2012-09-26T12:33:47.770 に答える
1

CSS4が親セレクターを導入するとき、それは可能かもしれませんが、今のところ、その子に基づいて親のスタイルを設定する方法はありません。それまでの間、ここに簡単なJSソリューションがあります。

$("#ddl").change(function () {
   $(this).css('background-color', $(this).find(":selected").css('background-color'));
});

注：これには、白であっても、すべての<option>背景色を指定する必要があります。それ以外の方法で気が進まなければ、JSでもそれを行うのは非常に簡単です。

于 2012-09-26T12:35:54.620 に答える
1

これは、少しの JavaScript で簡単に実行できます。JSFiddle で小さな例を作成しました: http://jsfiddle.net/DxK47/84/

ここでは jQuery を使用しましたが、他の js フレームワークまたは純粋な js で同様のトリックを実行するための演習として、それが必要な場合はそのままにしておきます。

$("#ddl").change(function(evt) {
  var select = evt.currentTarget;
  var item = select.item(select.selectedIndex);
  var style = $(item).attr("style");
  if (style) {
    $("#ddl").css({"background-color": style.substring(11)});
  } else {
    $("#ddl").css({"background-color": ""});
  }
});

編集：私は遅すぎました（jQueryの専門家ではありません）。基本的に同じことを行うより簡単な例については、上記の回答をご覧ください。

于 2012-09-26T13:29:52.707 に答える
-1

この構文はXHTMLで機能し、IE6では機能しませんが、これは、要求されたとおり、JavaScript以外の方法です。

option[selected] { background: #f00; }

これをオンザフライで実行したい場合は、他の人が提案しているように、javascriptを使用する必要があります。

于 2012-09-26T12:45:10.213 に答える