JS-点击页面的不同的数据元素,触发文本框或下拉框同步数据
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <body>
-
- <span onclick="zs('张三','110','0002')">人物1(项目当中此处可以是从后台拿的数据)</span>
- <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属性,这样文本框就能显示数据内容