`
tomastong
  • 浏览: 815 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Javascript下拉菜单动态创建节点

阅读更多
今天突然想做个下拉菜单响应动态创建节点文本框的js代码,其实并不是太难
很轻松的便做了出来,但是每次下拉菜单内容变换,去都是在body后面添加子文本框,所以声明了一个count变量,用来计数,以下附上html的测试代码
<html>
	<head>
		<title>test js</title>
	</head>
	<body>
	<select name="char" id="test" onchange="abc()">
		<option value="">-choose-</option>
	        <option value="aaa">aaa</option>
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
		<option value="ddd">ddd</option>
	</select>
	<script>
        	var count=0;
		function abc () {
	        	count++;
			var xxx = document.getElementById("test").value;
			if(xxx=="aaa"&&count==1){
				var dhy1 = document.createElement("input");
				dhy1.type="text";
				document.getElementsByTagName("body")[0].appendChild(dhy1);	
			}else if((xxx=="bbb"||xxx=="ccc")&&count==1){
				var dhy2 = document.createElement("input");
				var dhy3 = document.createElement("input");
				dhy2.type="date";					                  dhy3.type="date";
				document.getElementsByTagName("body")[0].appendChild(dhy2)
					document.getElementsByTagName("body")[0].appendChild(dhy3);			
				}else{
					alert("加载完成!");
				}
			}
		</script>
	</body>
</html>
分享到:
评论

相关推荐

    JavaScript基础教程第8版

    12.2 添加下拉菜单 228 12.3 改进下拉菜单 230 12.4 带说明的幻灯片 233 12.5 一个无聊的姓名生成器 236 12.6 柱状图生成器 240 12.7 样式表切换器 246 第13章 Ajax简介 253 13.1 Ajax的定义 253 ...

    JavaScript详解(第2版)

     14.11.5 下拉菜单和提示框   14.12 应知应会   练习   第15章 W3C DOM与JavaScript   15.1 W3C DOM   15.2 理解DOM节点   15.3 节点   15.3.1 父节点和子节点   15.3.2 兄弟节点   ...

    JavaScript应用177例

    26.3.htm 渐显的下拉菜单 第27章(\cha27) 27.1.htm 折叠菜单 27.2.htm 远程菜单 27.3.htm 弹出菜单 第28章(\cha28) 28.1.htm 旋转导航菜单 28.2.htm ...

    《javaScrip开发技术大全》源代码

    • sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 • sample04.htm 在同...

    ExtAspNet_v2.3.2_dll

    +修正动态创建Grid列的BUG(feedback:gxpan)。 -增加示例(data/grid_dynamic_columns.aspx)。 -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, ...

    jQuery权威指南-源代码

    3.3 创建节点元素/58 3.4 插入节点/60 3.4.1 内部插入节点方法/60 3.4.2 外部插入节点方法/64 3.5 复制节点/66 3.6 替换节点/68 3.7 包裹节点/69 3.8 遍历元素/71 3.9 删除元素/73 3.10 综合案例分析—...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +修正动态创建Grid列的BUG(feedback:gxpan)。 -增加示例(data/grid_dynamic_columns.aspx)。 -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, ...

    irisql:GraphQL原型制作工具可快速模拟Node API并可视化可从何处查询

    如果选中“关系”(Relation)框,则会出现一个下拉菜单,要求您选择相关的对象类型和字段,这些对象类型和字段将显示在图形上并带有链接。 单击图中的节点以更新其名称和字段。 在MongoDB(默认)和PostgreSQL之间...

    Ext Js权威指南(.zip.001

    1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    轻松搞定Extjs_原创

    第二十五章:动态操作树节点 200 一、概述 200 二、基本操作 201 三、事件 203 四、小结 204 第二十六章:远程获取节点数据 205 一、 概述 205 二、异步加载解析 206 三、小结 212 第二十七章:选项卡面板——Ext....

    Eclipse_Swt_Jface_核心应用_部分19

    第1章 Java语言的GUI历史 2 1.1 最初的AWT 2 1.2 Swing工具包 3 1.3 Eclipse的诞生 3 1.4 Eclipse贡献SWT工具包 5 1.4.1 SWT的结构 6 ...15.3.3 创建菜单项 297 15.3.4 菜单项的事件处理 298 ...

    Java学习笔记-个人整理的

    {1.13.3.3}文本创建与编辑}{43}{subsubsection.1.13.3.3} {1.14}\texttt {PATH}}{43}{section.1.14} {1.14.1}Java的打包命令}{44}{subsection.1.14.1} {2}Everything is an Object }{45}{chapter.2} {2.1}类与...

    asp.net知识库

    动态创建数据库 SQL Server数据库安全规划全攻略 .net通用数据库访问组件SQL Artisan应用简介1 在Framework1.0下同时连接SqlServer和Oracle的一些体会 XML XPath XPath最通俗的教程(ZZ) XPath中相对路径和绝对路径...

Global site tag (gtag.js) - Google Analytics