JS-点击页面的不同的数据元素，触发文本框或下拉框同步数据

最新推荐文章于 2022-07-07 17:24:03 发布

猩猿亿码

最新推荐文章于 2022-07-07 17:24:03 发布

阅读量322

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_44316726/article/details/108668808

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<span onclick="zs('张三','110','0002')">人物1(项目当中此处可以是从后台拿的数据)</span>&nbsp;&nbsp;
		<span onclick="zs('李四','120','0001')">人物2(项目当中此处可以是从后台拿的数据)</span>
	
		<table>
			<tr>
				<td>
				收件人:<input type="text"  id="sjrM" style="width: 148px;" ><span style="color: red;">*</span>
				<br>联系电话:<input type="text" id="lxdhM" style="width: 150px;"><span style="color: red;">*</span>
				<br>
				结费方式:<select id="jffsM" style="width: 150px;">
					        <option value="">全部</option>
							<option value="0002">快递到付</option>
							<option value="0001">处内月结</option>
						</select>
				</td>
			</tr>
		</table>

	</body>
	
	<!--onclick事件-->
	<script>
		function zs(sjr,lxdh,jffs){
			document.getElementById('sjrM').value=sjr;
			document.getElementById('lxdhM').value=lxdh;
			document.getElementById('jffsM').value=jffs;
		}
	</script>
</html>

注：
我们通过点击元素，触发onclick事件，调用zs(sjr,lxdh,jffs)方法
案例当中的方法参数 zs(‘张三’,‘110’,‘0002’) 和 zs(‘李四’,‘120’,‘0001’)是我们写死的，开发当中，这一块参数，我们需要从后台获取。
document.getElementById(‘sjrM’).value=sjr：
通过id选择器选择《input》对象，将参数sjr赋值给对象的value属性，这样文本框就能显示数据内容

猩猿亿码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-点击页面的不同的数据元素，触发文本框或下拉框同步数据

代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <span onclick="zs('张三','110','0002')">人物1(项目当中此处可以是从后台拿的数据)</span>&nbsp;&nbsp; &..
复制链接

扫一扫

专栏目录