您的位置:首页 > Web前端 > JavaScript

js二级联动

2020-02-17 05:21 603 查看
原文请参考http://jahunter.iteye.com/blog/325182

<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option selected>请选择</option>
<option value="脚本语言">脚本语言</option>
<option value="高级语言">高级语言</option>
<option value="其他语言">其他语言</option>
<option value="4GL第四代语言">4GL第四代语言</option>
</select>


<select name="s2">
<option value="请选择" selected>请选择</option>
</select>
</form>


<script language="javascript">
//获取一级菜单长度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);

//把一级菜单都设为数组
for (i=0; i<select1_len; i++)
{
select2[i] = new Array();
}

//定义基本选项
select2[0][0] = new Option("请选择", " ");

select2[1][0] = new Option("PHP", " ");
select2[1][1] = new Option("ASP", " ");
select2[1][2] = new Option("JSP", " ");

select2[2][0] = new Option("C/C++", " ");
select2[2][1] = new Option("Java", "Java语言 ");
select2[2][2] = new Option("C#", " ");
select2[2][3] = new Option("Pascal", " ");
select2[2][4] = new Option("Cobol", " ");
select2[2][5] = new Option("Basice", " ");

select2[3][0] = new Option("Perl", " ");
select2[3][1] = new Option("Ruby", " ");
select2[3][2] = new Option("Python", " ");

select2[4][0] = new Option("MODULA-2", "MODULA-2 ");
select2[4][1] = new Option("SMALLTALK-80", "SMALLTALK-80");

//联动函数
function redirec(x)
{
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}
temp.options[0].selected=true;

}

</script>



把函数改为:
function redirec(x)
{
var temp = document.frm.Track;
var select2_len = temp.options.length;

for (i=0;i<select2[x].length;i++)
{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}
//如果选中的数组的大小比原来的小,则删除原来中的选项中的多余部分
if(select2[x].length<select2_len){
for(j=select2_len-1; j >= select2[x].length; --j){
temp.remove(j);//删除
}
}
temp.options[0].selected=true;
}

或:

function redirec(x){
var temp = document.frm.s2;
temp.options.length=0;
for (i=0;i<select1[x].length;i++){
temp.options[i]=new Option(select1[x][i].text,select1[x][i].value);
}
temp.options[0].selected=true;
}
  • 点赞
  • 收藏
  • 分享
  • 文章举报
iteye_15217 发布了1 篇原创文章 · 获赞 0 · 访问量 42 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: