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 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
微信小程序实现日历功能
Nov 27 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
原生JS实现多条件筛选
Aug 19 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python 多线程实例详解
2017/03/25 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Python项目跨域问题解决方案
2020/06/22 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
客服主管岗位职责
2013/12/13 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
离婚民事起诉状
2015/08/03 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers