2

あなたの助けが必要です。

以下のコードを使用して、選択ボックスにオプションを動的に追加しています。ただし、javascript を使用して選択ボックスの各オプションにスタイルを追加するにはどうすればよいですか? そしてそれを動的にやっていますか？

var status = new Array()
status[0] = ""
status[1] = "ACTIVE"
status[2] = "ON HOLD"
status[3] = "CLOSED"
for (i=0; i<status.length; i++) { document.getElementById('status').options[i]=new Option(status[i], i) }

例) [ドロップダウンメニュー] ACTIVE (文字色は緑) ON HOLD (文字色は黄色) CLOSED (文字色は赤)

ご支援いただきありがとうございます。

乾杯、

ジェイ

4

2 に答える 2

3

各要素を個別にスタイルすることも、事前に css クラスを設定して要素にクラス名を割り当てることもできます。

このstackoverflowの質問を参照してください： Javascriptを使用したSelectboxのスタイルオプション

このフィドルをチェックしてください： http://jsfiddle.net/xdXFz/

必要に応じて、オプションを使用して選択を動的に作成する方法を参照してください。

サンプル：

var statuses = ["", "ACTIVE", "ON HOLD", "CLOSED"];
var elSelect = document.getElementById("status");

for ( var i = 0; i < statuses.length; i++ ){

    var elOption = document.createElement("option");
        // ex: Assign a css class to the option
        elOption.setAttribute('class', 'Your_CSS_Classname_Here');
        
        // ex: style the option
        elOption.style.fontWeight = 'bold';
        
        // set the value of the option
        elOption.setAttribute("value", statuses[i]);
        
        // set the text that displays for the option
        elOption.innerHTML = statuses[i];
    
    // add the option to your select dropdown
    elSelect.appendChild(elOption);

}
于 2012-10-11T16:52:35.633 に答える
0

多分このようなもの：

var status = new Array()
status[0] = ""
status[1] = "ACTIVE" 
status[2] = "ON HOLD" 
status[3] = "CLOSED"

var s1 = status[1];
var s2 = status[2];
var s3 = status[3];

if (s1) {
  //style here
}
else if (s2) {
  //style here
}
else if (s3) {
  //style here
}

for (i=0; i<status.length; i++) { document.getElementById('status').options[i]=new Option(status[i], i) }

テスト済みまたは洗練されたものにはほど遠い。

于 2012-10-11T16:40:05.687 に答える