通过select改变其他元素的属性或子节点

最新推荐文章于 2020-08-13 11:24:21 发布
最新推荐文章于 2020-08-13 11:24:21 发布
阅读量1.3k 收藏
点赞数
分类专栏： Ajax入门 文章标签： function input html javascript table border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tj19832/article/details/660178
版权

时间有限，先发源码，以后再整理：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function getOptionTableEdition(){
 var tableE = document.getElementById("table");
 var mySelect = document.getElementById("select")
 if (mySelect.options[0].selected){
  while(tableE.childNodes.length >0){
   tableE.removeChild(tableE.childNodes[0]);
  }
  var txt =document.createTextNode(mySelect.options[0].value);
  tableE.appendChild(txt);
 }else if( mySelect.options[1].selected){
  while(tableE.childNodes.length >0){
   tableE.removeChild(tableE.childNodes[0]);
  }
  var txt =document.createTextNode(mySelect.options[1].value);
  tableE.appendChild(txt);
 }
}
function getOptionTextEdition(){
 var TextE = document.getElementById("textfield");
 var mySelect = document.getElementById("select")
 if (mySelect.options[0].selected){
  TextE.setAttribute("value",mySelect.options[0].value);
 }else if( mySelect.options[1].selected){
  TextE.setAttribute("value",mySelect.options[1].value);
 }
}
function getOptionHiddenEdition(){//待测试
 var Hidden = document.getElementById("hiddenField");
 var mySelect = document.getElementById("select")
 if (mySelect.options[0].selected){
  Hidden.setAttribute("value",mySelect.options[0].value);
 }else if( mySelect.options[1].selected){
  Hidden.setAttribute("value",mySelect.options[1].value);
 }
}
function getOptionTextAreaEdition(){
 var textarea = document.getElementById("textarea");
 var mySelect = document.getElementById("select")
 if (mySelect.options[0].selected){
  while(textarea.childNodes.length >0){
   textarea.removeChild(tableE.childNodes[0]);
  }
  var txt =document.createTextNode(mySelect.options[0].value);
  textarea.appendChild(txt);
 }else if( mySelect.options[1].selected){
  while(textarea.childNodes.length >0){
   textarea.removeChild(textarea.childNodes[0]);
  }
  var txt =document.createTextNode(mySelect.options[1].value);
  textarea.appendChild(txt);
 }
}
</script>
</head>

<body>
<select name="select" id="select" onChange="getOptionHiddenEdition();">
  <option value="1">第一个</option>
  <option value="2" selected>第二个</option>
</select>
 
<table width="200" border="1"  >
  <tr>
    <td id="table">&nbsp; </td>
  </tr>
</table>
<p>
  <input type="text"  id="textfield" >
</p>
<p>&nbsp;</p>
<form name="form1" method="get" action="">
  <input name="hidden" type="hidden" id="hiddenField">
  <input type="submit" name="Submit" value="提交">
</form>
<p>  <textarea id="textarea"></textarea>
</p>
</body>
</html>

tj19832
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Jquery 实现动态监听select标签，并修改属性和 实时监听input的值 input propertychange
Caroline_Yang的博客
11-28 6042
<select id="select_id" name="condition"> <option id="order_id" value="order_id">订单号</option> <option id="order_time" value="order_time">下单时间</option> </select...
c lambda表达式 select 改变字段名称_Golang语言常用关键字之 select
weixin_39579726的博客
11-20 219
上一章中对于golang的语言基础说明如下：1 函数调用2 接口3 反射接下来我们来对golang的常用关键字进行说明，主要内容有：1. for 和 range2. select3. defer4. panic 和 recover5. make 和 new很多 C 语言或者 Unix 开发者听到 select 想到的都是系统调用，而谈到 I/O 模型时最终大都会提到基于 select、poll 和...
jQuery实现当select下拉框内容变化时，input输入框内容随之变化
cat_pp的博客
11-29 1万+
今天实现了一个功能，当select下拉框中的内容发生变化时，input输入框中的内容随之发生变化，具体实现方法如下：//绑定change事件，当下拉框内容发生变化时启动事件 $("#wlms").bind("change",function(){ //设置input输入框可用（初始化是不可用） $("#wlbh").attr("disabled",false);
一个select标签数据改变，另一个select标签数据随之改变
时光匆匆，带不走流年
11-16 1万+
在jsp页面的时候，出现了一个这样的需求。有两个select标签，一个select标签数据变化，另外一个select标签随之变化。 jsp页面代码：<tr id="suppUserId1"> <td><font color="red" style="margin-right:10px">*</font>配送员:</td> <td class="td2"> <select name="s
C#读取XML 的节点，以及属性
07-11
1. 使用 `XmlDocument`，你可以通过 `Load()` 方法加载XML文件，然后使用 `SelectNodes()` 或 `GetElementsByTagName()` 来查找特定的元素节点。例如： ```csharp XmlDocument xmlDoc = new XmlDocument(); xmlDoc....
js控制 select表单子节点左右上下移动
03-19
然后，我们可以通过`parentElement`属性找到其父`select`元素，进一步通过`querySelectorAll('option')`获取所有选项。 3. **选项的移动**：如果用户按下上或下箭头，我们需要改变`option`的`selected`属性来更新...
JavaScript获取select中text值的方法
10-20
6. **样式修改**：`element.style`属性可以用于直接修改元素的内联样式，`getComputedStyle`则用于获取元素的实际计算样式。 7. **事件冒泡与事件捕获**：理解事件冒泡和事件捕获机制对于编写高效的事件处理程序至...
js select 控制实现代码
10-30
本篇将详细介绍如何使用JavaScript来控制`<select>`元素，包括添加、删除和修改选项，以及查看和操作其属性。 首先，我们来看一下提供的代码示例： ```html <select id="test11" size="5" style="width:50px"></...
react写一个select组件的实现代码
12-08
3. **子元素处理**：`Select`组件通常会包含多个`Option`子组件，每个`Option`对应一个选项，也需要有自己的`value`属性。 4. **事件监听**：需要监听`onChange`事件，以及可能需要监听全局的`click`事件，以便在...
select框内容改变时触发事件的实现
热门推荐
哒哒的博客
02-23 9万+
重要 重要 重要 其实只需要使用change就可以实现 &lt;select id="test" &gt; &lt;/select&gt; 在js中，使用 $("#test").change(function(){ //要触发的事件 }); 这样就可以实现想要的功能了！！！ 对的，就是这么简单...
根据select标签中option选项的变化动态更改表单元素
菜鸟程序猿
09-01 1万+
今天做项目时，有一个功能点，需要根据select标签中option选项的变化动态来决定表单中某一行
select自定义属性值
jrrfgj的博客
02-04 1101
select自定义属性值
React开发-某一组件Click事件关联其他组件时-bind函数的使用
聚沙成塔
11-24 1290
1、场景一 背景： 实现点击"添加"按钮时 增加某一列元素，之后点击"删除"按钮，删除新增出的该列元素   问题： "删除"按钮 要关联，这列元素中的下拉框元素，获取该下拉框的信息，以便重新绘制页面   解决： “删除”按钮绑定的click事件修改为  this.click.bind(this,[具体索引值/该列下拉框元素引用])，这样在调用click事件时，就会把第二个参数的值传...
ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏
BADAO_LIUMANG_QIZHI的博客
08-13 4743
场景 在el-select的下拉框中，下拉选择指定的下拉项时才会显示后面的单选框，否则不显示。 效果如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先在页面中添加这两个控件 <el-row> <el-col span="10"> <el-form-item labe...
React点击切换子组件
weixin_39168678的博客
06-07 6074
业务描述 在如上图所示的页面上我需要分别点击底下的三个图标将中间内容部分分别替换成对应的组件，也就是在一个大组件中分别切换三个小组件 思路 通过控制css属性display:none来控制三个页面是谁来显示，中间主要是组件之间的通讯值得一说 实现 1 首先简单写好三个子组件 /*通讯录*/ class PageChatContent extends React.Component{...
用python怎么将树形结构根节点下的所有子节点的复选框打勾
最新发布
04-24
# 使用 CSS 选择器查找根节点及其所有子节点的复选框元素 checkboxes = soup.select('#root input[type="checkbox"]') # 遍历复选框元素列表，并勾选它们 for checkbox in checkboxes: checkbox.attrs['checked'] ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值