没有硬编码，挺不错的二级联动单选框的源代码

来源：互联网发布：淘宝皮质特征编辑：程序博客网时间：2024/05/02 04:20

-------------------没有硬编码，挺不错的-------------------------------

<html>

<head>

//单选框的数据定义，数组内是option的名字和值

var stack_s1 = [];

stack_s1.push(['请选择','']);

stack_s1.push(['旅游','旅游']);

stack_s1.push(['体育','体育']);

var stack_s2 = [];

stack_s2.push(['杭州国旅','旅游','100']);

stack_s2.push(['体育公司1','体育','101']);

stack_s2.push(['旅游公司2','旅游','102']);

stack_s2.push(['体育公司3','体育','103']);

function creatSelect1(){

//初始化S1

var s1 = document.getElementById("select1");

if(s1!=null){

document.getElementById("div1").removeChild(s1);

}

var select1 = document.createElement("select");

select1.id="select1";

document.getElementById("div1").appendChild(select1);

for(var i=0;i<stack_s1.length;i++){

addOption(select1.id,stack_s1[i][0],stack_s1[i][1]);

}

var s = document.getElementById("select1");

//给单选框1增加选择事件

s.onchange = function(){

//初始化S2

var s2 = document.getElementById("select2");

if(s2!=null){

document.getElementById("div2").removeChild(s2);

}

creatSelect2(this.value);

}

function creatSelect2(x){

var select2 = document.createElement("select");

select2.id="select2";

document.getElementById("div2").appendChild(select2);

addOption(select2.id,"请选择","");

//根据单选框1传递的value值，删选stack_s2符合需求的数据

for(var i=0;i<stack_s2.length;i++){

if(x==stack_s2[i][1]){

addOption(select2.id,stack_s2[i][0],stack_s2[i][2]);

}

select2.onchange = function(){

//初始化S2

console.debug(this.options[this.selectedIndex].text+":"+this.value);

}

function addOption(id,name,value){

var obj=document.getElementById(id);

obj.options.add(new Option(name,value));

}

</script>

</head>

<body>

</body>

</html>