在很多地方都會用到 一些常用的下拉框?? 如民族 、生肖、學歷、血型 等等???? 所以我們就有必要用javaScript對這些進行一個簡單的封裝??如果很次都在?? html 中編寫這樣的代碼
- <select?>????
- ??<option?></option>????
- ??<option?></option>???
- ??<option?></option>???
- </select>???
<select > ?
? <option ></option> ?
? <option ></option>
??<option ></option>
</select>
無疑是失敗的??并且不好實現動態的實現選中項 對于這樣的考慮??????
我們對這些進行一個簡單的?javaScript 代碼編寫
createSelect.js 中的代碼:
- var?arrayNation=new?Array(??
- ????'漢族','蒙古族','彝族','侗族','哈薩克族',????
- ????'畬族','納西族','仫佬族','仡佬族','怒族','保安族',???????
- ????'鄂倫春族','回族','壯族','瑤族','傣族','高山族',???????
- ????'景頗族','羌族','錫伯族','烏孜別克族','裕固族','赫哲族',??????
- ????'藏族','布依族','白族','黎族','拉祜族','柯爾克孜族','布朗族',??????
- ????'阿昌族','俄羅斯族','京族','門巴族','維吾爾族','朝鮮族',????
- ????'土家族','傈僳族','水族','土族','撒拉族','普米族','鄂溫克族',????
- ????'塔塔爾族','珞巴族','苗族','滿族','哈尼族','佤族','東鄉族',?????
- ????'達斡爾族','毛南族','塔吉克族','德昂族','獨龍族','基諾族');???
- ??
- var?arrayShengXiao=new?Array(??
- ????'鼠','牛','虎','兔','蛇',??
- ????'蛇','馬','羊','猴','雞','狗','豬');???
- ??
- var?arrayDegree=new?Array(??
- ????'小學','初中','高中','中專',??
- ????'大專','本科','碩士','博士');??
- ??
- ????
- function?createNationSelect(name,str)?{???
- ????document.write("<select?id='selectNation'></select>");???
- ????var?select=document.getElementById("selectNation");???
- ????for(var?i=0;i<arrayNation.length;i=i+1)?{????
- ????????select.name=name;????
- ????????var?opt=document.createElement("option");????
- ????????opt.value=arrayNation;????
- ????????opt.innerText=arrayNation;????
- ????????if(arrayNation==str)???{????
- ????????????opt.selected='true';????
- ????????}?????
- ????????select.appendChild(opt);??
- ???}??
- ?}???
- ??
- ???
- function?createShengXiaoSelect(name,str)?{???
- ????document.write("<select?id='selectShengXiao'></select>");??
- ????var?select=document.getElementById("selectShengXiao");???
- ????for(var?i=0;i<arrayShengXiao.length;i=i+1)?{???
- ????????select.name=name;?????
- ????????var?opt=document.createElement("option");????
- ????????opt.value=arrayShengXiao;???
- ????????opt.innerText=arrayShengXiao;????
- ????????if(arrayShengXiao==str)???{????
- ????????????opt.selected='true';?????
- ????????}?????
- ????????select.appendChild(opt);???
- ???}???
- }???
- ??
- function?createDegreeSelect(name,str)?{??
- ????document.write("<select?id='selectDegree'></select>");???
- ????var?select=document.getElementById("selectDegree");??
- ????for(var?i=0;i<arrayDegree.length;i=i+1)?{?????
- ????????select.name=name;????
- ????????var?opt=document.createElement("option");?????
- ????????opt.value=arrayDegree;?????
- ????????opt.innerText=arrayDegree;???
- ????????if(arrayDegree==str)???{???
- ????????????opt.selected='true';????
- ????????}?????
- ????????select.appendChild(opt);???
- ????}???
- }???
var arrayNation=new Array(
'漢族','蒙古族','彝族','侗族','哈薩克族', ?
????'畬族','納西族','仫佬族','仡佬族','怒族','保安族', ????
?? '鄂倫春族','回族','壯族','瑤族','傣族','高山族', ????
?? '景頗族','羌族','錫伯族','烏孜別克族','裕固族','赫哲族', ???
?? ?'藏族','布依族','白族','黎族','拉祜族','柯爾克孜族','布朗族', ???
?? ?'阿昌族','俄羅斯族','京族','門巴族','維吾爾族','朝鮮族', ?
????'土家族','傈僳族','水族','土族','撒拉族','普米族','鄂溫克族', ?
????'塔塔爾族','珞巴族','苗族','滿族','哈尼族','佤族','東鄉族', ??
????'達斡爾族','毛南族','塔吉克族','德昂族','獨龍族','基諾族');
var arrayShengXiao=new Array(
'鼠','牛','虎','兔','蛇',
'蛇','馬','羊','猴','雞','狗','豬');
var arrayDegree=new Array(
'小學','初中','高中','中專',
'大專','本科','碩士','博士');
/** *創建民族選擇框 */
function createNationSelect(name,str) {
document.write("<select id='selectNation'></select>");
var select=document.getElementById("selectNation");
for(var i=0;i<arrayNation.length;i=i+1) { ?
?select.name=name; ?
var opt=document.createElement("option"); ?
? opt.value=arrayNation; ?
?opt.innerText=arrayNation; ?
? if(arrayNation==str) ??{ ?
? opt.selected='true'; ?
?} ??
select.appendChild(opt);
}
}
/** *創建生肖選擇框 */
function createShengXiaoSelect(name,str) {
document.write("<select id='selectShengXiao'></select>");
var select=document.getElementById("selectShengXiao");
for(var i=0;i<arrayShengXiao.length;i=i+1) {
?? select.name=name; ??
var opt=document.createElement("option"); ?
? opt.value=arrayShengXiao;
?? opt.innerText=arrayShengXiao; ?
? if(arrayShengXiao==str) ??{ ?
? opt.selected='true'; ??
} ??
select.appendChild(opt);
}
}
/** *創建學歷選擇框 */
function createDegreeSelect(name,str) {
document.write("<select id='selectDegree'></select>");
var select=document.getElementById("selectDegree");
for(var i=0;i<arrayDegree.length;i=i+1) { ??
select.name=name; ?
? var opt=document.createElement("option"); ??
opt.value=arrayDegree; ??
opt.innerText=arrayDegree;
? ?if(arrayDegree==str) ??{
?? opt.selected='true'; ?
? } ??
select.appendChild(opt);
}
}
然后在html文件我們就可以這樣使用了
- <SCRIPT?src="createSelect.js"?language="javascript"></SCRIPT>???
- <script?type="text/javascript">????????
- ?????createNationSelect("userNation");???
- </script>???
<SCRIPT src="createSelect.js" language="javascript"></SCRIPT>
<script type="text/javascript"> ?????
?????createNationSelect("userNation");
</script>
??
這樣就很容易就創建一個 name="userNation" 的下拉框??
而且還很容易就實現了 指定默認選中項
- <script?type="text/javascript">???????????
- ??createNationSelect("userNation","苗族");?</script>???
<script type="text/javascript"> ????????
??createNationSelect("userNation","苗族"); </script>
如果要顯示一個用戶有民族的話
- <script?type="text/javascript">????????
- ?????createNationSelect("userNation","${user.userNation}");??
- ?</script>???
<script type="text/javascript"> ?????
?????createNationSelect("userNation","${user.userNation}");
</script>
這樣就簡單多了
可能到處重復利用了