当前位置: 首页 > 图文教程 > 网络编程 > Javascript > dropdownlist之间的互相联动实现(显示与隐藏)

Javascript
屏蔽Flash右键信息的js代码
JavaScript QueryString解析类代码
JavaScript写的一个自定义弹出式对话框代码
js限制输入框可输入字节数代码
JS与框架页的操作代码
jQuery+CSS 实现的超Sexy下拉菜单
使用IE6看老赵的博客 jQuery初探
jQuery UI.Layout Plug-in做框架
jQuery框架实例代码分析
JS通用代码:Tab选项卡通用js代码
JavaScript脚本的void(0)究竟是何含义
9个优秀的JavaScript实现的评级投票插件教程
jQuery最出色的是 API 设计
jquery团队发布jquery 1.4
jQuery 1.4:15个新特性和优化增强
jQuery插件分享:Flash/MP3/Video多媒体插件
jQuery 1.4官方文档详细讲述新特性功能
网页每次加载调用不同CSS样式表
JQuery知识:20个jQuery教程+11个jQuery插件
制作Web电子表格的jQuery插件:jQuery.sheet

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 69 ::
收藏到网摘: n/a

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>