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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
jquery 选取方法都有哪些
May 18 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
浅析创建javascript对象的方法
May 13 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
根据鼠标的位置动态的控制层的位置
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实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python with的用法
2014/08/22 Python
Python序列操作之进阶篇
2016/12/08 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python编写分类决策树的代码
2017/12/21 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python如何实现复制目录到指定目录
2020/02/13 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
车间班组长岗位职责
2013/11/13 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
2015年预算员工作总结
2015/05/14 职场文书
爱护公物主题班会
2015/08/17 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
HTML基本元素标签介绍
2022/02/28 HTML / CSS