在很多地方都会用到 一些常用的下拉框 如民族 、生肖、学历、血型 等等 所以我们就有必要用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>
这样就简单多了
可能到处重复利用了
分享到：
相关推荐
以下是对`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端，还包括对移动端的适配，并且还包含了一些额外的交互效果，比如点击下拉菜单之外的区域隐藏下拉菜单。 ...
- 使用`if...else if...`结构来判断当前下拉列表的状态（是否显示）。 - 如果下拉列表当前状态为`none`，则将其显示出来，并将触发器文本改为“关闭”。 - 如果下拉列表当前状态为`list-item`（即已显示），则将...
本文将详细介绍如何使用JavaScript实现全国城市三级联动下拉列表，并结合提供的资源进行解析。 首先，理解“三级联动”的概念：当用户在一级下拉列表（如省份）中选择一个选项时，二级下拉列表（如城市）会根据所选...
在这个场景中，我们将讨论如何使用jQuery实现级联下拉列表。 首先，我们需要理解`$().related`这个函数是jQuery的一个插件方法，它用于创建级联效果。在描述中给出的示例代码`$().related({S1:"s1", S2:"s2", S3:...
JavaScript三级下拉菜单的实现基于DOM（Document Object Model）操作，通过监听事件（如鼠标悬停或点击）来控制下拉菜单的显示和隐藏。通常，我们会有三个层次的`<select>`元素，每个层级的`<option>`元素会关联到下...
JS（JavaScript）与CSS（层叠样式表）是创建动态、响应式下拉菜单的关键技术。本主题聚焦于利用这两者构建二级下拉菜单，以及如何扩展到三级甚至更多级的下拉菜单结构。 首先，让我们了解JS和CSS的基础知识。JS是一...