dropdownlist之间的互相联动实现(显示与隐藏)


Posted in Javascript onNovember 24, 2009
<script language="javascript" type ="text/javascript" > var Arrchange1 =new Array (); 
var Arrchange2 =new Array (); 
var Arrchange3 =new Array (); 
function hide(s_id,index) 
{ 
var xxx = document .getElementById (s_id); 
var oldOption = xxx.children(index); 
var oldStr = oldOption.innerText; 
var newOption = document.createElement('<div' + oldOption.outerHTML.match(/(<\w*)([^>]*)(>)/)[2] +'>'); 
newOption.innerText= oldStr; 
newOption.swapNode(oldOption); 
//alert(xxx.innerHTML); 
} 
function show(s_id,index) 
{ 
var xxx =document .getElementById (s_id); 
var oldOption = xxx.children(index); 
if(oldOption.tagName=='DIV') 
{ 
var oldStr = oldOption.innerText; 
var newOption = document.createElement('<option' + oldOption.outerHTML.match(/(<\w*)([^>]*)(>)/)[2] +'>'); 
newOption.innerText = oldStr; 
newOption.swapNode(oldOption); 
} 
//alert(xxx.innerHTML); 
} 

function onchange1() 
{ 
var s_index=document .getElementById ("Ddl_question1").options[document .getElementById ("Ddl_question1").selectedIndex].value; 
s_index = parseInt(s_index); 
if(s_index ==0) 
{ 
show ('Ddl_question2',Arrchange1 [0] ); 
show ('Ddl_question3',Arrchange1 [0] ); 
Arrchange1.pop(); 
} 
else 
{ 
Arrchange1.push(s_index); 
if(Arrchange1.length>0) 
{ 
show ('Ddl_question2',Arrchange1 [0] ); 
} 
if(Arrchange1.length>0) 
{ 
show ('Ddl_question3',Arrchange1 [0] ); 
} 
hide('Ddl_question2',s_index); 
hide('Ddl_question3',s_index); 
} 
} 
function onchange2() 
{ 
var s_index=document .getElementById ("Ddl_question2").options[document .getElementById ("Ddl_question2").selectedIndex].value; 
s_index = parseInt(s_index); 
if(s_index ==0) 
{ 
show ('Ddl_question1',Arrchange1 [0] ); 
show ('Ddl_question3',Arrchange3 [0] ); 
Arrchange2.pop(); 
} 
else 
{ 
Arrchange2.push(s_index); 
if(Arrchange2.length>0) 
{ 
show ('Ddl_question1',Arrchange2 [0] ); 
} 
if(Arrchange2.length>0) 
{ 
show ('Ddl_question3',Arrchange2 [0] ); 
} 
hide('Ddl_question1',s_index); 
hide('Ddl_question3',s_index); 
} 
} 
function onchange3() 
{ 
var s_index=document .getElementById ("Ddl_question3").options[document .getElementById ("Ddl_question3").selectedIndex].value; 
s_index = parseInt(s_index); 
if(s_index ==0) 
{ 
show ('Ddl_question1',Arrchange3 [0] ); 
show ('Ddl_question2',Arrchange3 [0] ); 
Arrchange3.pop(); 
} 
else 
{ 
Arrchange3.push(s_index); 
if(Arrchange1.length>0) 
{ 
show ('Ddl_question1',Arrchange3 [0] ); 
} 
if(Arrchange2.length>0) 
{ 
show ('Ddl_question2',Arrchange3 [0] ); 
} 
hide('Ddl_question1',s_index); 
hide('Ddl_question2',s_index); 
} 
} 
function a() {alert("fuck ");} 
</script> 
<select name="Ddl_question1" id="Ddl_question1" onchange="onchange1()"> 
<option value="0">请选择密保信息</option> 
<option value="1">您母亲的姓名是?</option> 
<option value="2">您父亲的姓名是?</option> 
<option value="3">您配偶的姓名是?</option> 
<option value="4">您的出生地是?</option> 
<option value="5">您高中班主任的姓名是?</option> 
<option value="6">您初中班主任的姓名是?</option> 
<option value="7">您小学班主任的姓名是?</option> 
<option value="8">您小学校名是?</option> 
<option value="9">您的学号(或工号)是?</option> 
<option value="10">您父亲的生日是?</option> 
<option value="11">您母亲的生日是?</option> 
<option value="12">您配偶的生日是?</option> 
</select> 
<select name="Ddl_question2" id="Ddl_question2" onchange="onchange2()"> 
<option value="0">请选择密保信息</option> 
<option value="1">您母亲的姓名是?</option> 
<option value="2">您父亲的姓名是?</option> 
<option value="3">您配偶的姓名是?</option> 
<option value="4">您的出生地是?</option> 
<option value="5">您高中班主任的姓名是?</option> 
<option value="6">您初中班主任的姓名是?</option> 
<option value="7">您小学班主任的姓名是?</option> 
<option value="8">您小学校名是?</option> 
<option value="9">您的学号(或工号)是?</option> 
<option value="10">您父亲的生日是?</option> 
<option value="11">您母亲的生日是?</option> 
<option value="12">您配偶的生日是?</option> 
</select> 
<select name="Ddl_question3" id="Ddl_question3" onchange="onchange3()"> 
<option value="0">请选择密保信息</option> 
<option value="1">您母亲的姓名是?</option> 
<option value="2">您父亲的姓名是?</option> 
<option value="3">您配偶的姓名是?</option> 
<option value="4">您的出生地是?</option> 
<option value="5">您高中班主任的姓名是?</option> 
<option value="6">您初中班主任的姓名是?</option> 
<option value="7">您小学班主任的姓名是?</option> 
<option value="8">您小学校名是?</option> 
<option value="9">您的学号(或工号)是?</option> 
<option value="10">您父亲的生日是?</option> 
<option value="11">您母亲的生日是?</option> 
<option value="12">您配偶的生日是?</option> 
</select>
Javascript 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 #Javascript
js cookies实现简单统计访问次数
Nov 24 #Javascript
js获取图片长和宽度的代码
Nov 24 #Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 #Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 #Javascript
javascript 在网页中的运用(asp.net)
Nov 23 #Javascript
javascript DOM编程实例(智播客学习)
Nov 23 #Javascript
You might like
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
JS 对象介绍
2010/01/20 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python套接字流重定向实例汇总
2016/03/03 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python格式化输出%s和%d
2018/05/07 Python
python字符串与url编码的转换实例
2018/05/10 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
查看keras的默认backend实现方式
2020/06/19 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
学期自我鉴定
2013/11/04 职场文书
2016年教师节感言
2015/12/09 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL