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的一些注意
Dec 06 Javascript
javascript 闭包
Sep 15 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python实现EM算法实例代码
2020/10/04 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
简历中自我评价分享
2013/10/09 职场文书
新员工培训个人的自我评价
2013/10/09 职场文书
给客户的道歉信
2014/01/13 职场文书
干部行政关系介绍信
2014/01/17 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python