2010年8月31日 星期二

JavaScript 下拉式選單,群組依照不同項目名稱區隔顏色

若FORM及SELECT元件均無ID,可用以下CODE
document.forms[0].group.options.length //取得SELECT項目的數量
NowV = document.forms[0].group.options[i].text; //取得現在項目的名稱

//初始化 顏色
//----------------------------------------------------------------------------------------------------------------------
function InitColorAndSetCookies() {
var i = 0;
var lastV = 'test'; //紀錄上一筆項目的名稱,以供下次比對
var nowV = ''; //取得現在項目的名稱
var k = 0; //切換顏色用

for (i = 0; i < document.userForm.group.length; i++) {
//第一個不用處理外,其餘皆要處理
if (i != 0) {
//取得現在項目的名稱
nowV = document.getElementById("unit1").options[i].text;

//比對兩個項目的前三碼是否相同,含[xxxx] '比較長的單位名稱
if (lastV.indexOf("xxxx") == -1) {
if (nowV.substring(0, 3) != lastV.substring(0, 3)) { k = (k + 1) % 2; }
} else {
if (nowV.substring(0, 6) != lastV.substring(0, 6)) { k = (k + 1) % 2; }

}

if (k == 1) {
document.getElementById("unit1").options[i].style.backgroundColor = '#B3DFA7';
document.getElementById("unit1").options[i].style.color = 'black';
} else {
document.getElementById("unit1").options[i].style.backgroundColor = '#FFFF87';
document.getElementById("unit1").options[i].style.color = 'black';
}

//紀錄上一筆項目的名稱,以供下次比對
lastV = document.getElementById("unit1").options[i].text;
}
}
}







<表單 name="'userForm'" method="post" action="">
<下拉式選單 name=group id= unit1 >

沒有留言:

張貼留言

追蹤者