二级联动
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级联动</title>
</head>
<body>
<select name="" id="one">
<option value="">----忍者----</option>
<option value="0">----火影----</option>
<option value="1">----水影----</option>
<option value="2">----雷影----</option>
<option value="3">----土影----</option>
<option value="4">----风影----</option>
</select>
<select name="" id="two">
<option value="">----查看----</option>
</select>
<script>
arr=[
["千手柱间","千手扉间","猿飞日斩","波风水门","纲手","卡卡西","漩涡鸣人"],
["白连","鬼灯幻月","???","枸橘矢仓","照美冥","长十郎"],
["艾","艾","艾","艾","艾达鲁伊"],
["石河","无","大野木","黑土"],
["烈斗","沙门","???","???","我爱罗"]
]
var one=document.getElementById("one");
var two=document.getElementById("two");
one.onchange=function(){
two.length=1;
for(var i=0;i<arr[this.value].length;i++){
var option=document.createElement("option");
two.appendChild(option);
option.innerHTML=arr[this.value][i];
}
}
</script>
</body>
</html>
三级联动
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级联动</title>
</head>
<body>
<select name="" id="one">
<option value="">----忍者----</option>
<option value="0">----火影----</option>
<option value="1">----水影----</option>
<option value="2">----雷影----</option>
<option value="3">----土影----</option>
<option value="4">----风影----</option>
</select>
<select name="" id="two">
<option value="">----查看----</option>
</select>
<select name="" id="three">
<option value="">----查看----</option>
</select>
<script>
arr=[
["千手柱间","千手扉间","猿飞日斩","波风水门","纲手","卡卡西","漩涡鸣人"],
["白连","鬼灯幻月","???","枸橘矢仓","照美冥","长十郎"],
["艾","艾","艾","艾","艾达鲁伊"],
["石河","无","大野木","黑土"],
["烈斗","沙门","???","???","我爱罗"]
];
arrthree=[
[["初代火影"],["2代火影"],["3代火影"],["4代火影"],["5代火影"],["6代火影"],["7代火影"]],
[["初代水影"],["2代水影"],["3代水影"],["4代水影"],["5代水影"],["6代水影"]],
[["初代雷影"],["2代雷影"],["3代雷影"],["4代雷影"],["5代雷影"]],
[["初代土影"],["2代土影"],["3代土影"],["4代土影"]],
[["初代风影"],["2代风影"],["3代风影"],["4代风影"],["5代风影"]]
]
var one=document.getElementById("one");
var two=document.getElementById("two");
var three=document.getElementById("three");
one.onchange=function(){
two.length=1;
three.length=1;
var index=this.value;
for(var i=0;i<arr[this.value].length;i++){
var option=document.createElement("option");
two.appendChild(option);
option.value=i;
option.innerHTML="-----"+arr[this.value][i]+"----";
}
two.onchange=function(){
three.length=1;
for(var j=0;j<arrthree[index][this.value].length;j++){
var option=document.createElement("option");
three.appendChild(option);
option.innerHTML="----"+arrthree[index][this.value][j]+"----";
}
}
}
</script>
</body>
</html>