`
flash7783
  • 浏览: 308428 次
  • 性别: Icon_minigender_1
  • 来自: 南昌
社区版块
存档分类
最新评论

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

阅读更多
  1. <divid="nation">民族:</div>
  2. <divid="shengxiao">生肖:</div>
  3. <divid="degree">学位:</div>
  4. <divid="self">自定义:</div>
  5. <script>
  6. functioncreateSelect(c){
  7. var_inner={
  8. "nation":['汉族','蒙古族','彝族','侗族','哈萨克族',
  9. '畲族','纳西族','仫佬族','仡佬族','怒族','保安族',
  10. '鄂伦春族','回族','壮族','瑶族','傣族','高山族',
  11. '景颇族','羌族','锡伯族','乌孜别克族','裕固族','赫哲族',
  12. '藏族','布依族','白族','黎族','拉祜族','柯尔克孜族','布朗族',
  13. '阿昌族','俄罗斯族','京族','门巴族','维吾尔族','朝鲜族',
  14. '土家族','傈僳族','水族','土族','撒拉族','普米族','鄂温克族',
  15. '塔塔尔族','珞巴族','苗族','满族','哈尼族','佤族','东乡族',
  16. '达斡尔族','毛南族','塔吉克族','德昂族','独龙族','基诺族'],
  17. "shengxiao":['鼠','牛','虎','兔','蛇','蛇','马','羊','猴','鸡','狗','猪'],
  18. "degree":['小学','初中','高中','中专','大专','本科','硕士','博士']
  19. }
  20. var_array=c["array"]||_inner[c["type"]];
  21. var_select=document.createElement("select");
  22. for(vari=0;i<_array.length;i++){
  23. _select.options[i]=newOption(_array[i],_array[i]);
  24. _array[i]==c["selected"]&&(_select.options[i].selected=true);
  25. }
  26. c["id"]&&(_select.id=c["id"]);
  27. c["name"]&&(_select.name=c["name"]);
  28. c["onchange"]&&(_select.onchange=c["onchange"]);
  29. return_select;
  30. }
  31. //应用
  32. function$(id){returndocument.getElementById(id);}
  33. $("nation").appendChild(createSelect({type:"nation",selected:"蒙古族",onchange:function(){alert(this.value)}}));
  34. $("shengxiao").appendChild(createSelect({type:"shengxiao",selected:"虎",id:"shengxiao"}));
  35. $("degree").appendChild(createSelect({type:"degree",selected:"本科",name:"degree"}));
  36. $("self").appendChild(createSelect({array:["你","我","他"],selected:"他"}));
  37. </script>
分享到:
评论

相关推荐

    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