`
- 浏览:
308428 次
- 性别:
- 来自:
南昌
-
- <divid="nation">民族:</div>
-
<divid="shengxiao">生肖:</div>
-
<divid="degree">学位:</div>
-
<divid="self">自定义:</div>
- <script>
-
functioncreateSelect(c){
-
var_inner={
-
"nation":['汉族','蒙古族','彝族','侗族','哈萨克族',
-
'畲族','纳西族','仫佬族','仡佬族','怒族','保安族',
-
'鄂伦春族','回族','壮族','瑶族','傣族','高山族',
-
'景颇族','羌族','锡伯族','乌孜别克族','裕固族','赫哲族',
-
'藏族','布依族','白族','黎族','拉祜族','柯尔克孜族','布朗族',
-
'阿昌族','俄罗斯族','京族','门巴族','维吾尔族','朝鲜族',
-
'土家族','傈僳族','水族','土族','撒拉族','普米族','鄂温克族',
-
'塔塔尔族','珞巴族','苗族','满族','哈尼族','佤族','东乡族',
-
'达斡尔族','毛南族','塔吉克族','德昂族','独龙族','基诺族'],
-
"shengxiao":['鼠','牛','虎','兔','蛇','蛇','马','羊','猴','鸡','狗','猪'],
-
"degree":['小学','初中','高中','中专','大专','本科','硕士','博士']
- }
-
var_array=c["array"]||_inner[c["type"]];
-
var_select=document.createElement("select");
-
for(vari=0;i<_array.length;i++){
-
_select.options[i]=newOption(_array[i],_array[i]);
-
_array[i]==c["selected"]&&(_select.options[i].selected=true);
- }
-
c["id"]&&(_select.id=c["id"]);
-
c["name"]&&(_select.name=c["name"]);
-
c["onchange"]&&(_select.onchange=c["onchange"]);
-
return_select;
- }
-
-
function$(id){returndocument.getElementById(id);}
-
$("nation").appendChild(createSelect({type:"nation",selected:"蒙古族",onchange:function(){alert(this.value)}}));
-
$("shengxiao").appendChild(createSelect({type:"shengxiao",selected:"虎",id:"shengxiao"}));
-
$("degree").appendChild(createSelect({type:"degree",selected:"本科",name:"degree"}));
-
$("self").appendChild(createSelect({array:["你","我","他"],selected:"他"}));
- </script>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
以下是对`input`级联下拉列表的详细解释和实现方法。 1. **HTML基础知识**: `input`元素是HTML中的一种表单控件,用于接收用户输入。在创建级联下拉列表时,我们通常使用`<select>`标签来定义下拉列表,并通过`...
要填充`ComboBox`的下拉列表,可以使用`Items`集合。例如,通过`comboBox1.Items.Add("Option1")`来添加选项。这些选项可以是字符串,也可以是自定义对象,只要实现了`ToString()`方法。 3. **事件处理** `...
总结来说,实现JavaScript解析XML实现多级级联下拉列表的关键在于理解XML的结构、使用DOMParser解析XML,以及处理级联下拉列表的事件和逻辑。通过这些技术,我们可以创建出高效且易于维护的级联选择功能,提升用户的...
简单的JS下拉二级菜单。效果显著。可以重复使用的并且代码简单
在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...
本资源"JS实现可点击添加删除的下拉列表框多选标签控件源码.zip"提供了一个利用JavaScript实现的交互式下拉列表框,其中包含了多选功能以及标签展示的效果。这个控件允许用户不仅可以选择多个选项,还可以通过点击来...
2. **已选择项隐藏**:当用户选择了一个选项后,该选项不再出现在下拉列表中,这是为了防止重复选择和保持列表整洁。这需要维护一个已选择项的状态,并在渲染下拉列表时排除这些项。 3. **样式自定义**:原始的`...
通过这种方式,我们不仅实现了在下拉列表区域外点击关闭下拉列表的功能,而且利用Vue.js的组件化和Vuex的状态管理,使代码更加可维护和复用。在实际项目中,这样的设计可以轻松地扩展到其他类似的需求,比如关闭消息...
在本示例中,我们将探讨如何使用JavaScript实现一个级联下拉列表,特别是通过"地区JS文件"来实现这一功能。 首先,`AreaDemo.html`是演示页面,它包含了整个级联下拉列表的HTML结构和JavaScript引用。在这个文件中...
对于无限下拉列表,还可以利用AJAX异步请求来获取和更新更多的数据。 在实际开发中,还要考虑无障碍性(Accessibility)和跨浏览器兼容性,确保所有用户都能顺畅地使用这些功能。例如,使用ARIA属性增强表单的可...
本教程将深入探讨如何使用jQuery这一强大的JavaScript库来实现多级级联下拉列表。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...
"jquery联动下拉列表实现"是jQuery在实际应用中的一个常见功能,通常用于多级选择或者筛选场景,例如地区选择、产品分类等。这个功能可以让用户在选择一个下拉列表选项后,自动更新另一个下拉列表的内容,提高用户...
"年月日下拉列表实现"是一个常见且实用的UI元素,广泛应用于各种应用程序,如表单填写、日历插件、事件计划等。这个功能允许用户在下拉菜单中选择特定的日期,简化了输入过程,减少了错误输入的可能性。 在描述中...
在本文中,将详细介绍如何使用Vue.js框架来实现一个带有过渡动画效果的下拉菜单功能。这个功能不仅适用于Web端,还包括对移动端的适配,并且还包含了一些额外的交互效果,比如点击下拉菜单之外的区域隐藏下拉菜单。 ...
本文将详细介绍如何使用JavaScript实现全国城市三级联动下拉列表,并结合提供的资源进行解析。 首先,理解“三级联动”的概念:当用户在一级下拉列表(如省份)中选择一个选项时,二级下拉列表(如城市)会根据所选...
- 使用`if...else if...`结构来判断当前下拉列表的状态(是否显示)。 - 如果下拉列表当前状态为`none`,则将其显示出来,并将触发器文本改为“关闭”。 - 如果下拉列表当前状态为`list-item`(即已显示),则将...
在这个场景中,我们将讨论如何使用jQuery实现级联下拉列表。 首先,我们需要理解`$().related`这个函数是jQuery的一个插件方法,它用于创建级联效果。在描述中给出的示例代码`$().related({S1:"s1", S2:"s2", S3:...
JavaScript三级下拉菜单的实现基于DOM(Document Object Model)操作,通过监听事件(如鼠标悬停或点击)来控制下拉菜单的显示和隐藏。通常,我们会有三个层次的`<select>`元素,每个层级的`<option>`元素会关联到下...
JS(JavaScript)与CSS(层叠样式表)是创建动态、响应式下拉菜单的关键技术。本主题聚焦于利用这两者构建二级下拉菜单,以及如何扩展到三级甚至更多级的下拉菜单结构。 首先,让我们了解JS和CSS的基础知识。JS是一...