下拉框组件

createSelect.js：

/**
<select>
      <option value=""> TEXT</option>
      <option></option>
      <option></option>
</select>
**/


// 创建民族数组
var arrayNation=new Array(  
    '汉族','蒙古族','彝族','侗族','哈萨克族',    
    '畲族','纳西族','仫佬族','仡佬族','怒族','保安族',       
    '鄂伦春族','回族','壮族','瑶族','傣族','高山族',       
    '景颇族','羌族','锡伯族','乌孜别克族','裕固族','赫哲族',      
    '藏族','布依族','白族','黎族','拉祜族','柯尔克孜族','布朗族',      
    '阿昌族','俄罗斯族','京族','门巴族','维吾尔族','朝鲜族',    
    '土家族','傈僳族','水族','土族','撒拉族','普米族','鄂温克族',    
    '塔塔尔族','珞巴族','苗族','满族','哈尼族','佤族','东乡族',     
    '达斡尔族','毛南族','塔吉克族','德昂族','独龙族','基诺族');   


// 十二生肖数组
var arrayShengXiao=new Array(  
    '鼠','牛','虎','兔','蛇',  
    '蛇','马','羊','猴','鸡','狗','猪');   
// 学历数组
var arrayDegree=new Array(  
    '小学','初中','高中','中专',  
    '大专','本科','硕士','博士');  


/** *创建民族选择框  只能在IE下可用   */   
function createNationSelect(name,str) {   
    document.write("<select id='selectNation'></select>");   

    var select=document.getElementById("selectNation");   
    select.name=name;  
  // alert(arrayNation.length);
    for(var i=0;i<arrayNation.length;i=i+1) {    
          
        var opt = document.createElement("option");    
        opt.value=arrayNation[i];
        opt.innerText=arrayNation[i];    
        if(arrayNation[i]==str)   {    
            opt.selected='true';    
        }     
 
        select.appendChild(opt);  
 
   }  
}   




//兼容火狐和iE浏览器  
function createNationSelect2(name,str){


   document.write("<select id='selectNation'> <option> 请选择</option>  </select>");   

    var sel = document.getElementById("selectNation");   
       sel.length=1;
  
   for(var i=0;i<arrayNation.length;i++){
      var  opt = window.document.createElement("option");
           opt.value = arrayNation[i];
           opt.text = arrayNation[i];
  if(arrayNation[i] ==""){
    opt.text = "请选择";
  }
  
           if(arrayNation[i]==str)   {    
            opt.selected='true';    
           }     
  sel.add(opt);
       }
   
}
function createNationSelect3(name,str){
  document.write("<select id='selectNation' > <option> 请选择</option>  </select>");   
   var sel = document.getElementById("selectNation");   
      sel.length=1;
      sel.name=name;  
      sel.id=name;  
  for(var i=0;i<arrayNation.length;i=i+1){
     var  opt = window.document.createElement("option");
          opt.value = arrayNation[i];
          opt.text = arrayNation[i];
//   if(arrayNation[i] ==""){
//     opt.text = "请选择";
//   }
       // 判断是否是IE
          if($.browser.msie){ // 如果是IE
        if($.browser.version == 6){ // 如果是IE6
        if(arrayNation[i-1]==str)   {    
               opt.selected='selected'; 
        }
        }else{ // 不是IE6
        if(arrayNation[i]==str){    
               opt.selected='selected';  
            }
        }
      } else {// 如果不是IE
      if(arrayNation[i]==str)   {    
               opt.selected='selected';  
      }
          }     
  sel.add(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[i];   
        opt.innerText=arrayShengXiao[i];    
        if(arrayShengXiao[i]==str)   {    
            opt.selected='true';     
        }     
          select.appendChild(opt);     // 只在IE中可用
 
   }   
}   
// 兼容狐火和IE  
function createShengXiaoSelect2(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[i];   
        opt.text=arrayShengXiao[i];      // 兼容狐火和IE 
        if(arrayShengXiao[i]==str)   {    
            opt.selected='true';     
        }     
          select.add(opt);     // 兼容狐火和IE 
 
   }   
} 


/** *创建学历选择框 */
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[i];     
        opt.innerText=arrayDegree[i];   
        if(arrayDegree[i]==str)   {   
            opt.selected='true';    
        }     
        select.appendChild(opt);   // 只在IE中可用
    }   
}  


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[i];     
        opt.text=arrayDegree[i];     // 兼容狐火和IE 
        if(arrayDegree[i]==str)   {   
            opt.selected='true';    
        }     
        select.add(opt);   // 只在IE中可用
    }   
} 

测试： js实现下拉列表.html

<SCRIPT src="createSelect.js" language="javascript"></SCRIPT>   


<div align="center" >  
<script type="text/javascript">        
         
 // 测试民族选择框
  // createNationSelect2("userNation","苗族"); 
 createNationSelect2("userNation","蒙古族"); 
 
 // 测试生肖选择框
// createShengXiaoSelect2('shengxiao','狗');
 
 // 测试学历组件
 
 
// createDegreeSelect('selectDegree','本科');
</script> 


</div>