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 TextBox自动完成条
Jul 22 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 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 方便水印和缩略图的图形类
2009/05/21 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jquery入门—访问DOM对象方法
2013/01/07 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python实现音乐下载器
2018/04/15 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
PyTorch-GPU加速实例
2020/06/23 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
年度考核自我鉴定
2013/11/09 职场文书
法律专业实习鉴定
2013/12/22 职场文书
反腐倡廉标语
2014/06/24 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
见习报告怎么写
2014/10/31 职场文书
2014年营业员工作总结
2014/11/18 职场文书
资料员岗位职责范本
2015/04/13 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书