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插件 cluetip 关键词注释
Jan 12 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
JavaScript如何操作css
Oct 24 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
jquery解决客户端跨域访问问题
2015/01/06 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
vue props 单项数据流实例分享
2020/02/16 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Djang中静态文件配置方法
2015/07/30 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python 加密与解密小结
2018/12/06 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
公务员总结性个人自我评价
2013/12/05 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
2015年话务员工作总结
2015/04/29 职场文书
高考1977观后感
2015/06/04 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
详解PHP Swoole与TCP三次握手
2021/05/27 PHP