js操纵dom生成下拉列表框

最新推荐文章于 2021-06-04 14:04:49 发布
最新推荐文章于 2021-06-04 14:04:49 发布
阅读量929 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lb228988/article/details/19718005
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用dom生成下拉列表框</title>

</head>

<body οnlοad="setFun()">
	<form>
		<select name="area" id="area">
			<option value="0">没有地区</option>
		</select>
	</form>
	<script language="javascript">
		function setFun(){
			var id = new Array(1,2,3);
			var value = new Array("贵州","重庆","四川");
			var select = document.getElementById("area");
			select.length = 1;//设置只能选择一个
			select.options[0].selected = true;//设置默认选中第一个
			for(var x = 0;x<id.length;x++){
				var option = document.createElement("option");
				option.setAttribute("value",id[x]);//设置option属性值
				option.appendChild(document.createTextNode(value[x]));
				select.appendChild(option);//向select增加option
			}
		}
	</script>
</body>
</html>

LB228988
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js操纵dom生成下拉列表框的方法
12-09
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>利用dom生成下拉列表框</title> </head> <body onload=”
js--dom--动态生成【下拉列表】
04-22 2148
/**  *创建下拉列表  *param selectId 下拉列表id  *return selectObj 下拉列表对象  */  _uparde.createSelect = function createSelect(selectId){   var selectObj = document.createElement('select');   selectObj.id =
【JavaScript】DOM操作下拉框
weixin_34007886的博客
08-30 229
DOM操作下拉框 这次要实现一个效果，如下图: 在左边选框里选择一个选项，点击"-->"，就会把该选项选到右边框里。 在左边选框里选择多个选项，点击"==>"，就会把多个选项选到右边框里。 在右边选框里选择一个选项，点击"-->"，就会把该选项选到左边框里。 在右边选框里选择多个选项，点击"==>"，就会把多个选项选到左边框里。...
javascript中DOM复选框选择用法实例
10-24
主要介绍了javascript中DOM复选框选择用法,实例分析了javascript操作复选框实现全选与反选的相关技巧,需要的朋友可以参考下
js使用DOM设置单选按钮、复选框及下拉菜单的方法
10-24
主要介绍了js使用DOM设置单选按钮、复选框及下拉菜单的方法,较为详细的分析了单选按钮、复选框及下拉菜单的具体用法及实现技巧,非常具有实用价值,需要的朋友可以参考下
js中DOM三级列表（代码分享）
12-29
效果图： 代码如下： ... /*使用 HTML DOM 的方式实现联动菜单*/ var categories=[ {id:10,name:'男装',children:[ {id:101,name:'正装'}, {id:102,name:'T恤'}, {id:103,name:'裤衩'} ]}, {i
DOM-动态创建表格和动态添加下拉列表框实例
张亚运的专栏
11-29 3216
.html代码如下： 表格单元格对齐 .r1{background:#fba} .r2{background:#ccc} function createTable(row,col){ var table = document.createElement("table");//创建table var body = document.get
JavaScript简单例子之DOM动态获取年月日下拉框
slny1921394421的博客
07-21 5339
动态获取年月日下拉框 nianyueri1.html function getYear(){ var yearNode = document.getElementById("year"); //创建年，从1900年到现在 var minYear = 1900; var maxY
Javascript之DOM(下拉列表操作)
summer7310的专栏
06-07 1417
下拉列表框select的操作和其他操作有一些区别
HTML DOM 利用下拉框实现网页跳转
ios0213的专栏
05-16 2584
function go() { location=document.forms[0].gowhere.value } -Select location- ASP 教程 HTML 教程 JavaScripts 教程
jquery中attr和prop的区别
weixin_34384557的博客
04-24 408
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。 关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单： 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 上面的描述也许有点模糊，举几个例子就...
js dom html 写下拉菜单
soyomo的博客
05-20 236
闲话少说直接上代码 [code="java"] //定义文档类型是html //规定字符编码 我是下拉菜单 //select设置下拉菜单 请选择//option是下拉菜单的可用选项 河北省 北京市 河南省 山西省 天津市 请选择 //引入脚本 var pros=d...
将js中var值传入html下拉框,js操纵dom生成下拉列表框的方法
weixin_32043813的博客
06-04 297
利用dom生成下拉列表框没有地区function setFun(){var id = new Array(1,2,3);var value = new Array("贵州","重庆","四川");var select = document.getElementById("area");select.length = 1;//设置只能选择一个select.options[0].selected = ...
Js动态生成下拉框
csh的博客
01-20 7516
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：VS2015和 JavaScript 撰写时间：2019年1月20日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
layui select下拉列表框 选中事件
最新发布
05-26
在 layui 中，可以通过监听 `select` 组件的 `select` 事件来实现下拉列表框选中事件的处理。具体步骤如下： 1. 给 `select` 组件添加一个 `lay-filter` 属性，并赋一个值，用于标识该组件。 ``` <select name="city" lay-filter="citySelect"> <option value=""></option> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> ``` 2. 在页面加载完成后，使用 `form.render()` 方法进行渲染。 ``` layui.use(['form'], function() { var form = layui.form; form.render(); }); ``` 3. 监听 `select` 组件的 `select` 事件，并在事件回调函数中处理选中事件。 ``` form.on('select(citySelect)', function(data){ console.log(data.value); //得到被选中的值 console.log(data.elem); //得到select原始DOM对象 console.log(data.othis); //得到美化后的DOM对象 }); ``` 在上面的代码中，`data.value` 表示被选中的值，`data.elem` 表示原始的 `select` DOM 对象，`data.othis` 表示美化后的 DOM 对象。你可以根据实际需求来使用这些属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值