js 实现下拉列表的重复利用
在很多地方都会用到 一些常用的下拉框?? 如民族 、生肖、学历、血型 等等???? 所以我们就有必要用javaScript对这些进行一个简单的封装??如果很次都在?? html 中编写这样的代码
<select > ?? <option ></option> ?? <option ></option> ??<option ></option> </select>
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); } } <SCRIPT src="createSelect.js" language="javascript"></SCRIPT> <script type="text/javascript"> ??????????createNationSelect("userNation"); </script> ??<script type="text/javascript"> ??????????createNationSelect("userNation","苗族"); </script> <script type="text/javascript"> ??????????createNationSelect("userNation","${user.userNation}"); </script>