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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
如何优化vue打包文件过大
Apr 13 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
浅谈js闭包理解
2019/03/28 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
使用python3实现操作串口详解
2019/01/01 Python
Python使用Matlab命令过程解析
2020/06/04 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
大学生军训感想
2014/02/16 职场文书
有关爱国演讲稿
2014/05/07 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python