`
andongoop
  • 浏览: 62213 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

我的js动态生成下拉列表框

js 
阅读更多 
<html>
<head>
<script>
	var arrayNation = new Array('汉族','蒙古族','彝族','侗族','哈萨克族');
	var arrayDegree = new Array('小学','初中','高中','中专','大专','本科','硕士','博士');
	
	function createSelect(name, str){
		var _select = document.createElement("select");
		var firstOption = document.createElement("option");
		firstOption.value = "------select------";
		firstOption.text = "------请选择------";
		_select.appendChild(firstOption);
		for ( i = 0; i < str.length; i++){
			var _option = document.createElement("option");
			_option.value = str[i];
			_option.text = str[i];
			if (name == str[i]){
				_option.selected = "true";
			}
			_select.appendChild(_option);
		}
		return _select;
	}
</script>
</head>
<body>
<div id="nation">民族：</div>
<div id="degree">学历：</div>
<script>
	document.getElementById("nation").appendChild(createSelect('侗族', arrayNation));
	document.getElementById("degree").appendChild(createSelect('初中', arrayDegree));
</script>
</body>
</html>
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    下拉列表自动跳转超链接网页

    接下来，我们需要使用JavaScript来监听下拉列表的`change`事件，当用户选择一个新选项时，触发跳转操作。可以使用以下代码： ```javascript document.getElementById('dropdown').addEventListener('change', ...

    AJAX实现的动态下拉列表框例子

    在网页设计中，动态下拉列表框是一种常见且实用的功能，它能提升用户体验，使得用户在选择时无需刷新页面即可获取更多选项。本示例主要介绍如何使用AJAX（Asynchronous JavaScript and XML）技术来实现这样的功能。...

    jsp出生日期三级级联下拉列表

    在本文中，我们将深入探讨如何在JSP（JavaServer Pages）中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景，让用户能够方便地选择他们的出生年、月和日。 首先，...

    网页表单级联下拉列表自动填写方法

    然后，在JavaScript中使用 onchange 事件来监听页面的变化，当用户选择了前一个下拉列表框的选项后，JavaScript就会根据用户的选择来动态生成后一个下拉列表框的选项。 例如，在省市区三级下拉列表框中，当用户选择...

    下拉列表框经典赋值适合IE火狐

    因此，在实现动态生成下拉列表框的选项时，需要采用不同的方法来确保所有浏览器都能正确显示和操作这些选项。 #### 3. 经典赋值方法详解 在提供的代码示例中，展示了三种不同的方法来动态填充下拉列表框的选项，即`...

    js操纵dom生成下拉列表框的方法

    通过上述步骤，我们可以利用JavaScript动态地生成下拉列表框，并且可以为其添加任意数量的选项。这种方法尤其适用于选项需要从服务器动态加载，或者在页面加载时根据某些条件改变选项的情况。 例如，上述代码中，...

    纯JS炫酷下拉列表框美化插件pickout源码.zip

    JavaScript作为客户端脚本语言，能实时处理用户交互，为下拉列表框添加动态效果和自定义功能，比如搜索过滤、分页、多选等。 【标签】"前端代码" 表明此资源与前端开发相关，主要关注的是浏览器端的实现。前端代码...

    jQuery实现动态生成年月日级联下拉列表示例

    总之，通过这个示例，我们可以学习到如何使用jQuery动态生成和更新级联的年月日下拉列表，以及如何处理JavaScript中的日期和闰年判断。这个方法适用于各种需要用户选择日期的场景，提高了用户体验并简化了开发过程。

    js实现动态生成select中的option

    以上就是一个简单的JavaScript动态生成`select`下拉列表的流程。在实际应用中，数据可能来自服务器，或者是通过其他方式动态生成。此外，为了提供更好的用户体验，我们还可以考虑添加加载提示、错误处理等机制。通过...

    jQuery ajax JSON 下拉列表框级联

    在Web开发中，级联下拉列表是一种常见的交互设计，用户选择一个选项后，另一个相关的下拉列表会根据前者的选值动态更新。这个过程通常涉及到前端与后端的交互，利用JavaScript库如jQuery和服务器端框架如Spring MVC...

    JS中Select下拉列表类(支持输入模糊查询)功能

    JS中Select下拉列表类支持输入模糊查询功能的知识点主要包括以下几个方面： 1. HTML结构设计：实现输入模糊查询功能的下拉列表通常包含一个输入框和一个下拉框。输入框用于用户输入查询字符，下拉框则是提供选项供...

    javascript实现无限级级联下拉列表

    在JavaScript编程中，实现无限级联下拉列表是一项常见的需求，尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择，每一级的选择会影响到下一级的显示内容。下面我们将...

    三级联动下拉列表框（SELECT）jquery插件（js 三级联动） php版

    6. **jQuery.FillOptions.js**：这个名字暗示这可能是一个专门处理下拉列表填充的jQuery插件，用于根据JSON数据动态生成和填充下拉列表选项。 总的来说，这个项目利用了jQuery的事件处理和DOM操作能力，结合PHP...

    Ajax实现下拉列表从数据库读取数据级联

    4. **处理响应**：前端接收到服务器响应后，解析JSON数据，动态生成二级下拉列表的选项。 5. **更新UI**：用新生成的选项替换二级下拉列表的现有内容，使用户看到级联效果。 具体代码示例（使用jQuery和Ajax）： `...

    javascript实现通过拼音首字母快速选择下拉列表

    本篇文章将深入探讨如何使用JavaScript实现一个通过拼音首字母快速选择下拉列表的功能，这一功能通常用于提高用户在网页上的数据输入效率，特别是处理大量中文姓名或词汇时。 首先，我们需要理解HTML的基本结构，它...

    jQuery下拉列表框日期选择代码.zip

    《jQuery下拉列表框日期选择代码详解》 在网页开发中，用户界面的交互性和易用性至关重要。jQuery，作为一款强大的JavaScript库，为开发者提供了丰富的功能和便捷的API，使得实现复杂的交互效果变得轻而易举。本篇...

    下拉列表.zip

    此外，可以使用数组来存储下拉列表的选项，并通过`for`循环或者`map()`函数来动态生成HTML元素。如果涉及到数据的实时更新，可能还会用到AJAX请求，从服务器获取或发送数据。 对于前端框架，如React、Vue或Angular...

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

    总结来说，这个JS实现的可点击添加删除的下拉列表框多选标签控件涉及到了JavaScript的DOM操作、事件处理、数据验证以及CSS样式设计等多个方面，对于学习和提升前端开发技能具有很高的参考价值。实际使用时，开发者...

    js下拉列表也可以这么使用??有点变态

    在JavaScript的世界里，下拉列表通常指的是...无论是动态生成选项、监听用户选择，还是使用第三方库增强功能，都能让下拉列表变得“有点变态”。在实际项目中，应结合具体需求，灵活运用这些技术和工具，提升用户体验。

Magicbox
Global site tag (gtag.js) - Google Analytics