dropdownlist之间的互相联动实现(显示与隐藏)

 更新时间:2009年11月24日 01:25:37   作者:  
dropdownlist之间的互相联动(显示与隐藏)
复制代码 代码如下:

<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>

相关文章

  • 微信小程序解除10个请求并发限制

    微信小程序解除10个请求并发限制

    这篇文章主要介绍了微信小程序解除10个请求并发限制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JavaScript中 this 指向问题深度解析

    JavaScript中 this 指向问题深度解析

    这篇文章主要介绍了JavaScript中 this 指向问题深度解析,JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问,本文给大家深度解析,需要的朋友可以参考下
    2017-02-02
  • javascript简单实现命名空间效果

    javascript简单实现命名空间效果

    这篇文章主要介绍了javascript简单的实现命名空间效果的方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JS封装的自动创建表格的实现代码

    JS封装的自动创建表格的实现代码

    这篇文章主要介绍了JS封装的自动创建表格的实现代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js日期时间补零的小例子

    js日期时间补零的小例子

    js日期时间补零的小例子,需要的朋友可以参考一下
    2013-03-03
  • JavaScript交换变量的常用方法小结【4种方法】

    JavaScript交换变量的常用方法小结【4种方法】

    这篇文章主要介绍了JavaScript交换变量的常用方法,结合实例形式总结分析了JavaScript交换变量的4种实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 学习JavaScript中的闭包closure应该注意什么

    学习JavaScript中的闭包closure应该注意什么

    这篇文章主要介绍了学习JavaScript中的闭包closure应该注意什么?在 JavaScript 中, 每当创建一个函数, 闭包就会在函数创建的同时被创建出来,但是学习的时候我们应该注意哪些问题呢,带着疑问一起进入下面文章学习具体内容吧
    2022-06-06
  • 2007/12/23更新创意无限,简单实用(javascript log)

    2007/12/23更新创意无限,简单实用(javascript log)

    在javascript开发过程中,如果总是使用alert的方式调试程序,在某些简单的程序中是可行的. 但是在通常的项目很复杂,这种方式已经很难满足,企业级开发的需要。
    2007-12-12
  • 小程序实现倒计时组件的使用示例

    小程序实现倒计时组件的使用示例

    倒计时是指从一个固定的时间开始,向前推算一段时间,来计算目标时间或剩余时间的过程,本文主要介绍了小程序实现倒计时组件的使用示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • JavaScript中数组随机排序的实现详解

    JavaScript中数组随机排序的实现详解

    这篇文章主要为大家详细介绍了JavaScript中数组随机排序的实现,主要是利用原地算法和sort/shuffle算法,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-11-11

最新评论