js 实现下拉列表的重复利用
在很多地方都会用到 一些常用的下拉框?? 如民族 、生肖、学历、血型 等等???? 所以我们就有必要用javaScript对这些进行一个简单的封装??如果很次都在?? html 中编写这样的代码
<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); } } 然后在html文件我们就可以这样使用了
<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","${user.userNation}"); </script> 这样就简单多了
可能到处重复利用了<select > ?? <option ></option> ?? <option ></option> ??<option ></option> </select>
无疑是失败的??并且不好实现动态的实现选中项
这样就简单多了
可能到处重复利用了
如果将数据存放在javascript中,那么必然导致这样一种情况:
在A页面中,我只想创建一个学历的下拉框,但是我却将民族啊国家与地区啊,省份啊等等,随着网站中越来越多的这种下拉框,该javascript的“重量”也随之增长,方便了网站开发者,却放弃了用户。
<select > ?? <option ></option> ?? <option ></option> ??<option ></option> </select>
无疑是失败的??并且不好实现动态的实现选中项
这样就简单多了
可能到处重复利用了
如果将数据存放在javascript中,那么必然导致这样一种情况:
在A页面中,我只想创建一个学历的下拉框,但是我却将民族啊国家与地区啊,省份啊等等,随着网站中越来越多的这种下拉框,该javascript的“重量”也随之增长,方便了网站开发者,却放弃了用户。
cbfmai 写道如果每次都在html中编写这样的代码,无疑是失败的
显然的,现在的网站有哪些还是纯静态页面的?像这种公共的代码,肯定会被重用,被include进来,所以根本就不没有多少机会每次都在html中编写这样的代码。
我在做项目的时候经常会引入一个或者多个js文件,在没看到你的回复之前,我从来没考虑过页面加载的效率问题(jsp页面),我想请教一下,引入这样的通用的比较大的js文件 对页面的加载速度究竟能有多大影响呢? 22 楼 yiqixiaolong 2009-08-24 <p>楼主的代码虽然bug比较严重,但让js新手读起来很舒服,很容易懂,三楼的代码给人一种高深莫测的感觉,让人很佩服你的思维,语句写的很巧妙,命名也很霸道,但是看起来有点费劲,有种看文言文的感觉。</p>
<p>?</p> 23 楼 tauruszhao 2009-08-25 新手学习 向高人致敬 24 楼 一的男子 2009-08-25 不错,学习了 25 楼 jltest 2009-08-31 这样对seo不好。 26 楼 babbyyang 2009-09-01 直接写到页面中include进来就行了
也可以将选项写在数据库表中,通过OSCache动态生成。 27 楼 lf008 2009-09-03 其实用自定义标签感觉更好,但还是支持下,java封装了很多,javascript很少进行封装,看了还是很有帮助。 28 楼 forcer521 2009-09-20 3楼的代码确实是很经典。非常简洁的代码,学习了。 29 楼 melin 2009-09-22 建一个业务字典表,封装成一个标签