通过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

相关文章

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》:本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言:为什么"相等"判断如此重要?方法1:使用some()+includes()(适合小数组)方法2

Go中select多路复用的实现示例

《Go中select多路复用的实现示例》Go的select用于多通道通信,实现多路复用,支持随机选择、超时控制及非阻塞操作,建议合理使用以避免协程泄漏和死循环,感兴趣的可以了解一下... 目录一、什么是select基本语法:二、select 使用示例示例1:监听多个通道输入三、select的特性四、使用se

Python如何调用另一个类的方法和属性

《Python如何调用另一个类的方法和属性》在Python面向对象编程中,类与类之间的交互是非常常见的场景,本文将详细介绍在Python中一个类如何调用另一个类的方法和属性,大家可以根据需要进行选择... 目录一、前言二、基本调用方式通过实例化调用通过类继承调用三、高级调用方式通过组合方式调用通过类方法/静

把Python列表中的元素移动到开头的三种方法

《把Python列表中的元素移动到开头的三种方法》在Python编程中,我们经常需要对列表(list)进行操作,有时,我们希望将列表中的某个元素移动到最前面,使其成为第一项,本文给大家介绍了把Pyth... 目录一、查找删除插入法1. 找到元素的索引2. 移除元素3. 插入到列表开头二、使用列表切片(Lis

Go语言使用select监听多个channel的示例详解

《Go语言使用select监听多个channel的示例详解》本文将聚焦Go并发中的一个强力工具,select,这篇文章将通过实际案例学习如何优雅地监听多个Channel,实现多任务处理、超时控制和非阻... 目录一、前言:为什么要使用select二、实战目标三、案例代码:监听两个任务结果和超时四、运行示例五

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as