读书人

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

发布时间: 2012-11-23 00:03:43 作者: rapoo

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 建一个业务字典表,封装成一个标签

读书人网 >JavaScript

热点推荐