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实现div的切换特效上一个下一个
Feb 11 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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 array数组的教程详解
2013/06/05 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP反射学习入门示例
2019/06/14 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
js读取本地文件的实例
2017/12/22 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python虚拟环境venv用法详解
2020/05/25 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
国外的一些J2EE面试题一
2012/10/13 面试题
家长会演讲稿范文
2014/01/10 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年法院工作总结
2014/11/24 职场文书
2016年教师节慰问信
2015/12/01 职场文书
青少年法制教育心得体会
2016/01/14 职场文书