js 实现下拉列表的重复利用

Html代码

1. <select >     
2.   <option ></option>     
3.   <option ></option>    
4.   <option ></option>    
5. </select>   

无疑是失败的  并且不好实现动态的实现选中项 对于这样的考虑我们对这些进行一个简单的 javaScript 代码编写 createSelect.js 中的代码：

Js代码

1. var arrayNation=new Array(   
2.     '汉族','蒙古族','彝族','侗族','哈萨克族',     
3.     '畲族','纳西族','仫佬族','仡佬族','怒族','保安族',        
4.     '鄂伦春族','回族','壮族','瑶族','傣族','高山族',        
5.     '景颇族','羌族','锡伯族','乌孜别克族','裕固族','赫哲族',       
6.     '藏族','布依族','白族','黎族','拉祜族','柯尔克孜族','布朗族',       
7.     '阿昌族','俄罗斯族','京族','门巴族','维吾尔族','朝鲜族',     
8.     '土家族','傈僳族','水族','土族','撒拉族','普米族','鄂温克族',     
9.     '塔塔尔族','珞巴族','苗族','满族','哈尼族','佤族','东乡族',      
10.     '达斡尔族','毛南族','塔吉克族','德昂族','独龙族','基诺族');    
11.   
12. var arrayShengXiao=new Array(   
13.     '鼠','牛','虎','兔','蛇',   
14.     '蛇','马','羊','猴','鸡','狗','猪');    
15.   
16. var arrayDegree=new Array(   
17.     '小学','初中','高中','中专',   
18.     '大专','本科','硕士','博士');   
19.   
20.      
21. function createNationSelect(name,str) {    
22.     document.write("<select id='selectNation'></select>");    
23.     var select=document.getElementByIdx("selectNation");    
24.     for(var i=0;i<arrayNation.length;i=i+1) {     
25.         select.name=name;     
26.         var opt=document.createElement("option");     
27.         opt.value=arrayNation;     
28.         opt.innerText=arrayNation;     
29.         if(arrayNation==str)   {     
30.             opt.selected='true';     
31.         }      
32.         select.appendChild(opt);   
33.    }   
34.  }    
35.   
36.     
37. function createShengXiaoSelect(name,str) {    
38.     document.write("<select id='selectShengXiao'></select>");   
39.     var select=document.getElementByIdx("selectShengXiao");    
40.     for(var i=0;i<arrayShengXiao.length;i=i+1) {    
41.         select.name=name;      
42.         var opt=document.createElement("option");     
43.         opt.value=arrayShengXiao;    
44.         opt.innerText=arrayShengXiao;     
45.         if(arrayShengXiao==str)   {     
46.             opt.selected='true';      
47.         }      
48.         select.appendChild(opt);    
49.    }    
50. }    
51.   
52. function createDegreeSelect(name,str) {   
53.     document.write("<select id='selectDegree'></select>");    
54.     var select=document.getElementByIdx("selectDegree");   
55.     for(var i=0;i<arrayDegree.length;i=i+1) {      
56.         select.name=name;     
57.         var opt=document.createElement("option");      
58.         opt.value=arrayDegree;      
59.         opt.innerText=arrayDegree;    
60.         if(arrayDegree==str)   {    
61.             opt.selected='true';     
62.         }      
63.         select.appendChild(opt);    
64.     }    
65. }   

然后在html文件我们就可以这样使用了

Html代码

1. <SCRIPT src="createSelect.js" language="javascript"></SCRIPT>    
2. <script type="text/javascript">         
3.      createNationSelect("userNation");    
4. </script>   

  

这样就很容易就创建一个 name="userNation" 的下拉框  
而且还很容易就实现了 指定默认选中项

Html代码

1. <script type="text/javascript">            
2.   createNationSelect("userNation","苗族"); </script>   

如果要显示一个用户有民族的话

Html代码

1. <script type="text/javascript">         
2.      createNationSelect("userNation","${user.userNation}");   
3.  </script>