JavaScript实现下拉列表框添加选项

最新推荐文章于 2024-05-03 11:17:45 发布
最新推荐文章于 2024-05-03 11:17:45 发布
阅读量6.8k 收藏 19
点赞数 2
分类专栏： # JavaScript 文章标签： JavaScript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123321/article/details/102623330
版权

效果展示

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div>
			<select name="list" id="list">
				<option>请选择</option>
				<option value="">唐僧</option>
			</select>
			<input type="button" value="添加列表项" onclick="addItems();">
			
		</div>
		<script type="text/javascript">
			function addItems() {
				// 调用方法
				var items = ["孙悟空", "猪八戒", "沙悟净", "小白龙"];
				addListOption("list", items);
			}

			/**
			 * 向下拉列表框中添加列表项
			 *
			 * @ selectId 下拉列表框的id
			 * @ listItems 要添加到列表框中的列表项数组
			 */
			function addListOption(selectId, listItems) {
				// 循环遍历数组
				for (var item in listItems) {
					// 获取下拉列表框对象
					var selectID = document.getElementById(selectId);
					// 创建option元素
					var option = document.createElement("option");
					// 添加节点
					option.appendChild(document.createTextNode(listItems[item]));
					// 设置value属性
					option.setAttribute("value", listItems[item]);
					// 将option添加到下拉列表框中
					selectID.appendChild(option);
				}
			}
		</script>
	</body>
</html>

 

二木成林
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS或JQuery实现添加下拉选择框内容
xuguoxing123的博客
04-01 2132
       具体代码如下： <html> <body> <select id="select" title="请选择" class=""> <option value="" selected="selected">--全部--</option><!-- 默认选...
js 实现下拉菜单 完整代码
qq_43435403的博客
08-22 5106
一、js实现下拉菜单 二、解题思路： 三、代码： 1.html <ul id="divBox"> <li class="myLi" onclick="openS(this,0)"> <span class="iconfont icon-maobi front"></span> <span class="font">Diseno
html怎么写下拉选择框
最新发布
m0_65659549的博客
05-03 727
代表下拉列表中的一个选项。在实际应用中，你可以根据需要添加更多选项，并根据实际情况调整。在HTML中创建下拉选择框，通常使用。
js中获取元素的方法总结
weixin_44638167的博客
09-08 4836
1,根据 ID 获取 使用 getElementById() 方法可以获取带有 ID 的元素对象。 document.getElementById('id'); 使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。 var time =document.getElementById('time'); console.log(time); 2,根据标签名获取 使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。 注意：
前端怎么设置在下拉框中添加一个选项为文本框_输入标题和正文，在文本框中输入文本、符号及公式等的操作方法...
weixin_39725873的博客
12-05 870
5.2.1 输入标题和正文在普通视图中，幻灯片会出现“单击此处添加标题”或“单击此处添加副标题”等提示文本框，这种文本框统称为【文本占位符】。在【文本占位符】中输入文本是最基本、最方便的一种输入方式。➊ 单击【幻灯片】窗格中的【文本占位符】。➋ 输入文本“有志者事竟成”，输入的文本会自动替换【文本占位符】中的提示性文字。5.2.2 在文本框中输入文本 幻灯片中【文本占位符】的位置是固定的，如果想在...
js根据输入内容自动填充下拉框
fengxinzi_jing的专栏
10-10 9585
这是AJAX的典型应用之一，即根据用户在输入框内输入的内容来搜索数据库，然后把内容显示出来，当然不一定非要显示在下拉框中，也可以放在其它的地方，我们这里只是把搜索到的内容填充到下拉框中，以便用户精确定位。效果图如下：   一.JS需调用服务器端方法及时响应客户端用户输入的内容 1.在页加载事件期间,通过Ajax.Utility.RegisterTypeForAjax注册包含服务端函数的类
利用 JS 制作一个下拉列表（进阶版）
qq_41801219的博客
03-01 1064
利用 JS 制作一个下拉列表（进阶版） 直接上代码 var w1 = document.querySelectorAll("#odiv .w1"); for (let i=0 ;i<w1.length ; i++) { w1[i].addEventListener("click",function(){ var div1 = w1[i].querySelector...
基于JavaScript实现控制下拉列表
10-15
本文将详细介绍如何使用JavaScript实现对下拉列表（`<select>`）的控制，包括选择单个选项、全选和移除选项等操作。 首先，我们需要理解HTML中的`<select>`标签。`<select>`用于创建下拉列表，可以通过`<option>`...
基于JavaScript实现下拉列表左右移动代码
10-20
总的来说，这个JavaScript实现提供了一个基本但实用的下拉列表选项移动解决方案。它可以通过调整和扩展以适应不同的需求，如添加动画效果、增加对多个选择的支持或实现更复杂的业务逻辑。了解这些基础后，开发者可以...
javascript实现通过拼音首字母快速选择下拉列表
08-04
本篇文章将深入探讨如何使用JavaScript实现一个通过拼音首字母快速选择下拉列表的功能，这一功能通常用于提高用户在网页上的数据输入效率，特别是处理大量中文姓名或词汇时。 首先，我们需要理解HTML的基本结构，它...
jQuery下拉列表框日期选择代码
06-10
在本文中，我们将深入探讨如何使用jQuery实现一个下拉列表框的日期选择功能。这个功能常见于各种网页应用，用于用户方便地输入日期和时间。我们将会解析标题和描述中的关键知识点，并提供实现这一功能所需的步骤和...
JS下拉列表，漂亮的下拉列表（javascript）
03-11
不多说，支持所有主流浏览器，支持列表搜索功能，宽高自适应等，样式独立，可随心更改，内含示例，解压即可运行看效果。绝对是你想要的！如果有什么意见或建议，请留言。thanks!
js实现下拉列表选中某个值的方法(3种方法)
10-23
主要介绍了js实现下拉列表选中某个值的方法,涉及JavaScript针对select下拉列表选择操作的相关技巧,需要的朋友可以参考下
javascript为下拉列表动态添加数据项
12-12
javascript为下拉列表添加数据项.html 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> <title>为下拉列表动态添加数据项</title> [removed] function gel(id) { return document.getElementById(id); } [removed]
JS+CSS实现美化的下拉列表框效果
10-23
总结来说，JS+CSS实现的美化的下拉列表框效果，通过CSS定义了丰富的样式和状态变化，利用JavaScript增加了动态交互功能。这种技术可以提高用户界面的吸引力和可用性，是现代Web开发中的常见实践。对于前端开发者来说...
JS:给select添加option选项
wcqlwyt的博客
06-14 8007
今天遇到一个问题，就是动态添加option到slect里面在ie6不成功： &lt;script&gt; var shosetype=document.createElement("selec
js增加、删除下拉框选项值
congine_mcfeng的专栏
03-30 1163
下拉框去掉重复值 [code="java"] Array.prototype.unique = function() { var data = []; var a = {}; for (var i = 0; i < this.length; i++) { if(!a[this[i]]){ a[this[i...
jQuery动态添加下拉列表选项
ZZY1078689276的专栏
10-23 7211
不说了，直接上代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'MyJsp.jsp'
JavaScript如何实现下拉列表？
05-31
JavaScript实现下拉列表的方法有很多，这里介绍一种比较常见的实现方式。 首先，在HTML中定义一个下拉列表的框架，如下所示： ```html <select id="selectBox"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> ``` 其中，`id="selectBox"`为下拉列表的标识符，`option`标签为列表项，`value`属性为列表项的值，`option`标签中间的文本为列表项的显示文本。 然后，在JavaScript中对下拉列表进行操作，实现下拉列表的功能，如下所示： ```javascript // 获取下拉列表元素 var selectBox = document.getElementById("selectBox"); // 添加选项 var option4 = document.createElement("option"); option4.value = "option4"; option4.text = "选项4"; selectBox.add(option4); // 删除选项 selectBox.remove(2); // 获取选中的选项值 var selectedValue = selectBox.options[selectBox.selectedIndex].value; ``` 其中，`document.getElementById()`方法用于获取下拉列表元素，`createElement()`方法用于创建新的列表项，`add()`方法用于添加选项，`remove()`方法用于删除选项，`selectedIndex`属性用于获取当前选中选项的索引，`value`属性用于获取选项的值。 通过上述方法，就可以实现一个简单的下拉列表，通过添加和删除选项，可以动态修改下拉列表的内容，通过获取选中的选项值，可以获取用户选择的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值