`
cbfmai
  • 浏览: 40625 次
  • 性别: Icon_minigender_1
  • 来自: 衡阳
社区版块
存档分类
最新评论

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> 


这样就简单多了
可能到处重复利用了
分享到:
评论
29 楼 melin 2009-09-22  
建一个业务字典表,封装成一个标签
28 楼 forcer521 2009-09-20  
3楼的代码确实是很经典。非常简洁的代码,学习了。
27 楼 lf008 2009-09-03  
其实用自定义标签感觉更好,但还是支持下,java封装了很多,javascript很少进行封装,看了还是很有帮助。
26 楼 babbyyang 2009-09-01  
直接写到页面中include进来就行了
也可以将选项写在数据库表中,通过OSCache动态生成。
25 楼 jltest 2009-08-31  
这样对seo不好。
24 楼 風一樣的男子 2009-08-25  
不错,学习了
23 楼 tauruszhao 2009-08-25  
新手学习 向高人致敬
22 楼 yiqixiaolong 2009-08-24  
<p>楼主的代码虽然bug比较严重,但让js新手读起来很舒服,很容易懂,三楼的代码给人一种高深莫测的感觉,让人很佩服你的思维,语句写的很巧妙,命名也很霸道,但是看起来有点费劲,有种看文言文的感觉。</p>
<p> </p>
21 楼 yiqixiaolong 2009-08-24  
rrrrutdk 写道
cbfmai 写道
在很多地方都会用到 一些常用的下拉框   如民族 、生肖、学历、血型 等等     所以我们就有必要用javaScript对这些进行一个简单的封装  如果很次都在   html 中编写这样的代码
<select >  
  <option ></option>  
  <option ></option> 
  <option ></option> 
</select> 

无疑是失败的  并且不好实现动态的实现选中项
这样就简单多了
可能到处重复利用了


如果将数据存放在javascript中,那么必然导致这样一种情况:
在A页面中,我只想创建一个学历的下拉框,但是我却将民族啊国家与地区啊,省份啊等等,随着网站中越来越多的这种下拉框,该javascript的“重量”也随之增长,方便了网站开发者,却放弃了用户。


cbfmai 写道
如果每次都在html中编写这样的代码,无疑是失败的


显然的,现在的网站有哪些还是纯静态页面的?像这种公共的代码,肯定会被重用,被include进来,所以根本就不没有多少机会每次都在html中编写这样的代码。


我在做项目的时候经常会引入一个或者多个js文件,在没看到你的回复之前,我从来没考虑过页面加载的效率问题(jsp页面),我想请教一下,引入这样的通用的比较大的js文件 对页面的加载速度究竟能有多大影响呢?
20 楼 kaipingk 2009-08-24  
pwz1985 写道
这样做没什么意义,现在项目都是框架,模板,这些东西还不如定义在后台,更简单省事

支持这种做法! jsp中自己些个自定义轻度封装的 select radio checkbox等tag。很容易从用程度比js高
19 楼 rrrrutdk 2009-08-24  
cbfmai 写道
在很多地方都会用到 一些常用的下拉框   如民族 、生肖、学历、血型 等等     所以我们就有必要用javaScript对这些进行一个简单的封装  如果很次都在   html 中编写这样的代码
<select >  
  <option ></option>  
  <option ></option> 
  <option ></option> 
</select> 

无疑是失败的  并且不好实现动态的实现选中项
这样就简单多了
可能到处重复利用了


如果将数据存放在javascript中,那么必然导致这样一种情况:
在A页面中,我只想创建一个学历的下拉框,但是我却将民族啊国家与地区啊,省份啊等等,随着网站中越来越多的这种下拉框,该javascript的“重量”也随之增长,方便了网站开发者,却放弃了用户。


cbfmai 写道
如果每次都在html中编写这样的代码,无疑是失败的


显然的,现在的网站有哪些还是纯静态页面的?像这种公共的代码,肯定会被重用,被include进来,所以根本就不没有多少机会每次都在html中编写这样的代码。
18 楼 clone168 2009-08-24  
<div class="quote_title">习惯在马桶上思考 写道</div>
<div class="quote_div">  _array[i] == c["selected"] &amp;&amp; (_select.options[i].selected = true);      这句比较精僻</div>
<p>呵呵,js中的“||”和“&amp;&amp;”在一些地方能简化代码的</p>
<p> </p>
17 楼 习惯在马桶上思考 2009-08-24  
等同   if(_array[i] == c["selected"]) {(_select.options[i].selected = true)};  可以这样理解吧
16 楼 习惯在马桶上思考 2009-08-24  
  _array[i] == c["selected"] && (_select.options[i].selected = true);      这句比较精僻
15 楼 pwz1985 2009-08-24  
这样做没什么意义,现在项目都是框架,模板,这些东西还不如定义在后台,更简单省事
14 楼 cbfmai 2009-08-24  
qlzgg 写道
在struts1中怎么用呢?

js 是不受框架限制的,在哪里都可以用!
13 楼 cbfmai 2009-08-24  
Shrek82 写道
不太明白为什么要用JS来生成,用原始的<select>有什么缺点呢,麻烦楼主解释一下,谢谢。

没有什么缺陷,只是上面这个方面能重复利用,相当于一个框架功能吧。
12 楼 qlzgg 2009-08-24  
在struts1中怎么用呢?
11 楼 jianguang_qq 2009-08-23  
02221021 写道
呵呵,是啊.

for (var i =0, d; d = ['id', 'name', 'onchange'][i++]) {
     c[d] && (_select[d] = c[d]);
}

这样也可以


哈哈,创意不错,不过少了个分号“;”,囧
10 楼 whaosoft 2009-08-22  
提到下拉框 倍郁闷 数据量大时巨慢 在加上联想功能

相关推荐

    input 级联下拉列表

    以下是对`input`级联下拉列表的详细解释和实现方法。 1. **HTML基础知识**: `input`元素是HTML中的一种表单控件,用于接收用户输入。在创建级联下拉列表时,我们通常使用`&lt;select&gt;`标签来定义下拉列表,并通过`...

    c#可输入的下拉列表框

    要填充`ComboBox`的下拉列表,可以使用`Items`集合。例如,通过`comboBox1.Items.Add("Option1")`来添加选项。这些选项可以是字符串,也可以是自定义对象,只要实现了`ToString()`方法。 3. **事件处理** `...

    JavaScript解析XML实现多级级联下拉列表

    总结来说,实现JavaScript解析XML实现多级级联下拉列表的关键在于理解XML的结构、使用DOMParser解析XML,以及处理级联下拉列表的事件和逻辑。通过这些技术,我们可以创建出高效且易于维护的级联选择功能,提升用户的...

    JS二级下拉列表

    简单的JS下拉二级菜单。效果显著。可以重复使用的并且代码简单

    Ajax级联下拉列表.rar

    在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...

    JS实现可点击添加删除的下拉列表框多选标签控件源码.zip

    本资源"JS实现可点击添加删除的下拉列表框多选标签控件源码.zip"提供了一个利用JavaScript实现的交互式下拉列表框,其中包含了多选功能以及标签展示的效果。这个控件允许用户不仅可以选择多个选项,还可以通过点击来...

    带下拉列表的搜索框

    2. **已选择项隐藏**:当用户选择了一个选项后,该选项不再出现在下拉列表中,这是为了防止重复选择和保持列表整洁。这需要维护一个已选择项的状态,并在渲染下拉列表时排除这些项。 3. **样式自定义**:原始的`...

    Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

    通过这种方式,我们不仅实现了在下拉列表区域外点击关闭下拉列表的功能,而且利用Vue.js的组件化和Vuex的状态管理,使代码更加可维护和复用。在实际项目中,这样的设计可以轻松地扩展到其他类似的需求,比如关闭消息...

    级联下拉列表绑定 地区JS文件

    在本示例中,我们将探讨如何使用JavaScript实现一个级联下拉列表,特别是通过"地区JS文件"来实现这一功能。 首先,`AreaDemo.html`是演示页面,它包含了整个级联下拉列表的HTML结构和JavaScript引用。在这个文件中...

    表单判断即弹出窗口,即无限下拉列表

    对于无限下拉列表,还可以利用AJAX异步请求来获取和更新更多的数据。 在实际开发中,还要考虑无障碍性(Accessibility)和跨浏览器兼容性,确保所有用户都能顺畅地使用这些功能。例如,使用ARIA属性增强表单的可...

    jQuery实现的多级级联下拉列表

    本教程将深入探讨如何使用jQuery这一强大的JavaScript库来实现多级级联下拉列表。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    jquery联动下拉列表实现

    "jquery联动下拉列表实现"是jQuery在实际应用中的一个常见功能,通常用于多级选择或者筛选场景,例如地区选择、产品分类等。这个功能可以让用户在选择一个下拉列表选项后,自动更新另一个下拉列表的内容,提高用户...

    年月日下拉列表实现

    "年月日下拉列表实现"是一个常见且实用的UI元素,广泛应用于各种应用程序,如表单填写、日历插件、事件计划等。这个功能允许用户在下拉菜单中选择特定的日期,简化了输入过程,减少了错误输入的可能性。 在描述中...

    vue实现带过渡效果的下拉菜单功能

    在本文中,将详细介绍如何使用Vue.js框架来实现一个带有过渡动画效果的下拉菜单功能。这个功能不仅适用于Web端,还包括对移动端的适配,并且还包含了一些额外的交互效果,比如点击下拉菜单之外的区域隐藏下拉菜单。 ...

    js 省市区select 三级联动(全国城市三级联动下拉列表)

    本文将详细介绍如何使用JavaScript实现全国城市三级联动下拉列表,并结合提供的资源进行解析。 首先,理解“三级联动”的概念:当用户在一级下拉列表(如省份)中选择一个选项时,二级下拉列表(如城市)会根据所选...

    javascript实现简单的下拉菜单

    - 使用`if...else if...`结构来判断当前下拉列表的状态(是否显示)。 - 如果下拉列表当前状态为`none`,则将其显示出来,并将触发器文本改为“关闭”。 - 如果下拉列表当前状态为`list-item`(即已显示),则将...

    jQuery 级联下拉列表

    在这个场景中,我们将讨论如何使用jQuery实现级联下拉列表。 首先,我们需要理解`$().related`这个函数是jQuery的一个插件方法,它用于创建级联效果。在描述中给出的示例代码`$().related({S1:"s1", S2:"s2", S3:...

    Javascript-三级下拉菜单的级联显示实例

    JavaScript三级下拉菜单的实现基于DOM(Document Object Model)操作,通过监听事件(如鼠标悬停或点击)来控制下拉菜单的显示和隐藏。通常,我们会有三个层次的`&lt;select&gt;`元素,每个层级的`&lt;option&gt;`元素会关联到下...

    JS 二级下拉菜单。很漂亮,就是没实现三级下拉

    JS(JavaScript)与CSS(层叠样式表)是创建动态、响应式下拉菜单的关键技术。本主题聚焦于利用这两者构建二级下拉菜单,以及如何扩展到三级甚至更多级的下拉菜单结构。 首先,让我们了解JS和CSS的基础知识。JS是一...

Global site tag (gtag.js) - Google Analytics