2025年3月17日 星期一 甲辰(龙)年 月十六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:12-09来源:作者:点击数:41

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

在这里插入图片描述
在这里插入图片描述

代码如下:

  • <!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属性,这样文本框就能显示数据内容

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门