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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP中trim()函数简单使用指南
2015/04/16 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
vue2.x数组劫持原理的实现
2020/04/19 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python字符串匹配算法KMP实例
2015/07/18 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
财务部总监岗位职责
2014/03/12 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2014年科技工作总结
2014/11/26 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
python数字类型和占位符详情
2022/03/13 Python
世界十大狙击步枪排行榜
2022/03/20 杂记