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

2024-04-11 23:38

本文主要是介绍通过select改变其他元素的属性或子节点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

时间有限,先发源码,以后再整理:

<!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>

这篇关于通过select改变其他元素的属性或子节点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/895497

相关文章

MySQL 事务的概念及ACID属性和使用详解

《MySQL事务的概念及ACID属性和使用详解》MySQL通过多线程实现存储工作,因此在并发访问场景中,事务确保了数据操作的一致性和可靠性,下面通过本文给大家介绍MySQL事务的概念及ACID属性和... 目录一、什么是事务二、事务的属性及使用2.1 事务的 ACID 属性2.2 为什么存在事务2.3 事务

Spring Cache注解@Cacheable的九个属性详解

《SpringCache注解@Cacheable的九个属性详解》在@Cacheable注解的使用中,共有9个属性供我们来使用,这9个属性分别是:value、cacheNames、key、key... 目录1.value/cacheNames 属性2.key属性3.keyGeneratjavascriptor

Spring Boot 事务详解(事务传播行为、事务属性)

《SpringBoot事务详解(事务传播行为、事务属性)》SpringBoot提供了强大的事务管理功能,通过@Transactional注解可以方便地配置事务的传播行为和属性,本文将详细介绍Spr... 目录Spring Boot 事务详解引言声明式事务管理示例编程式事务管理示例事务传播行为1. REQUI

Go 语言中的select语句详解及工作原理

《Go语言中的select语句详解及工作原理》在Go语言中,select语句是用于处理多个通道(channel)操作的一种控制结构,它类似于switch语句,本文给大家介绍Go语言中的select语... 目录Go 语言中的 select 是做什么的基本功能语法工作原理示例示例 1:监听多个通道示例 2:带

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处