JS实现三个列表框实现大类、中类和小类的分类
发布网友
发布时间：2022-05-13 19:48
共5个回答
懂视网
时间：2022-05-14 20:33
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
省：
<select id="sname">
<option>—请选择—</option>
</select>
市：
<select id="s_city">
<option>—请选择—</option>
</select>
区：
<select id="q_name">
<option>—请选择—</option>
</select>
<script>
var sheng=["陕西省","四川省"];
var city=[
["西安市","渭南市","宝鸡市"],
["成都市","绵阳市"]
]
var qu=[
[
["莲湖区","雁塔区","长安区"],
["渭南1区","渭南2区","渭南3区"],
["成仓区","金台区","高新区"],
],
[
["成都1区","成都2区","成都3区"],
["绵阳1区","绵阳2区","绵阳3区"]
]
] //先获取
var s=document.getElementById("sname");
var s_city=document.getElementById("s_city");
var q_name=document.getElementById("q_name"); //for循环使js里的sheng元素添加到s里
for(var i=0;i<sheng.length;i++)
{
var option=new Option(sheng[i],i);
s.appendChild(option);
} //选择事件
var qucity;
s.onchange=function (){
s_city.options.length=1;
q_name.options.length=1;
var index=this.value;
var shi=city[index];
qucity=qu[index];
for(var i=0;i<shi.length;i++)
{
var option=new Option(shi[i],i);
s_city.appendChild(option)
}
}
s_city.onchange=function (){
q_name.options.length=1;
var index=this.value;
var squ=qucity[index];
for(var i=0;i<squ.length;i++)
{
var option=new Option(squ[i],i);
q_name.appendChild(option);
}
}
</script>
</body>
</html>相关推荐：
js如何生成二维码？js生成二维码的方法（代码）
javascript实现省市联动的代码分享
热心网友
时间：2022-05-14 17:41
如果是定死的就用数据
这是我写的一个例子，数据是定死的，我这里只有两个下拉列表，三个的其实道理一样
<html>
<head>
<meta http-equiv=content-type content="text/html;charset=GBK">
<script language="JavaScript" type="text/javascript">
<!--
// 初始时定义相关数组
var provinces = ["吉林", "辽宁", "黑龙江", "江苏", "山东"];
var jiLin = ["长春", "吉林", "白城", "白山"];
var liaoNing = ["沈阳", "大连", "鞍山"];
var heiLongJiang = ["哈尔滨", "佳木斯", "牡丹江", "齐齐哈尔"];
var jiangSu = ["南京", "苏州", "无锡", "常州", "徐州"];
var shanDong = ["济南", "烟台", "青岛", "威海"];
var allProvinces = ["", jiLin, liaoNing, heiLongJiang, jiangSu, shanDong];
// 取得用户选择的省
function selectProvince(obj){
var province = obj.value;
if(parseInt(province) >= allProvinces.length)
return;
addCity(allProvinces[province]);
}
// 向城市复选框中添加数据
function addCity(province){
var citys = document.all.city;
citys.options.length = 1;
document.all.picture.src = "images\\城市.jpg";
if(province == "") return;
for(var i=0; i<province.length; i++){
citys.add(new Option(province[i], i+1, false, false));
}
}
// 选择城市列出介绍
function selectCity(obj){
var city = obj.value;
document.all.picture.src = "images\\" + obj.options[parseInt(city)].text + ".jpg";
}
-->
</script>
</head>
<body>
<!--province-->
<select id="sheng" onchange="selectProvince(this);">
<option value="0" selected = true>选择省</option>
</select>
<!--city-->
<select id="city" onchange="selectCity(this);">
<option value="0" selected = true>城市</option>
</select>
<br>
<!--picture-->
<table border=15 style=border-style:ridge width=360 height=300>
<tr valign=top>
<td>
<img src="images\\城市.jpg" id="picture" name="picture" width=360 height=300/>
</td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
// 初始化省
var obj = document.all.sheng;
for(i=0; i<5; i++){
obj.add(new Option( provinces[i], i + 1, false, false));
}
-->
</script>
</body>
</html>
热心网友
时间：2022-05-14 18:59
3个的如下 ：
========================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>无标题文档</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
</HEAD>
<BODY bgColor=#ffffff text=#000000>
<DIV align=center>
<FORM name=isc>
<TABLE border=0 cellPadding=0 cellSpacing=0>
<TBODY>
<TR align=middle>
<TD height=11 noWrap>
<SELECT name=example onchange=redirect(this.options.selectedIndex) size=1>
<OPTION selected>请选择</OPTION>
<OPTION>大类1</OPTION>
<OPTION>大类2</OPTION>
<OPTION>大类3</OPTION>
<OPTION>大类4</OPTION>
<OPTION>大类5</OPTION>
<OPTION>大类6</OPTION>
</SELECT>
<SELECT name=stage2 onchange=redirect1(this.options.selectedIndex) size=1>
<OPTION selected value=" ">请选择</OPTION>
</SELECT>
<SELECT name=stage3 onchange=redirect2(this.options.selectedIndex) size=1>
<OPTION selected value=" ">请选择</OPTION>
</SELECT>
</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</DIV>
<P>
<SCRIPT language=JavaScript>
<!--
var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[1][0]=new Option("请选择"," ");
group[1][1]=new Option("大1中1","1");
group[1][2]=new Option("大1中2","2");
group[1][3]=new Option("大1中3","3");
group[1][4]=new Option("大1中4","1.htm");
group[2][0]=new Option("请选择","");
group[2][1]=new Option("大2中1","");
group[2][2]=new Option("大2中2","");
group[3][0]=new Option("请选择","");
group[3][1]=new Option("大3中1","");
group[3][2]=new Option("大3中2","");
group[4][0]=new Option("请选择","");
group[4][1]=new Option("大4中1","");
group[4][2]=new Option("大4中2","");
group[5][0]=new Option("请选择","");
group[5][1]=new Option("大5中1","");
group[5][2]=new Option("大5中2","");
group[6][0]=new Option("请选择","");
group[6][1]=new Option("大6中1","");
group[6][2]=new Option("大6中2","");
var temp=document.isc.stage2
function redirect(x){
//alert(x);
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}
var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}
secondGroup[1][0][0]=new Option("请选择"," ");
secondGroup[1][1][0]=new Option("请选择","");
secondGroup[1][1][1]=new Option("大1中1小1","http://www.google.cn");
secondGroup[1][1][2]=new Option("大1中1小2","http://www.google.cn");
secondGroup[1][1][3]=new Option("大1中1小3","http://www.google.cn");
secondGroup[1][1][4]=new Option("大1中1小4","http://www.google.cn");
secondGroup[1][1][5]=new Option("大1中1小5","http://www.google.cn");
secondGroup[1][1][6]=new Option("大1中1小6","http://www.google.cn");
secondGroup[1][2][0]=new Option("请选择"," ");
secondGroup[1][2][1]=new Option("大1中2小1","http://www.google.cn");
secondGroup[1][2][2]=new Option("大1中2小2","http://www.google.cn");
secondGroup[1][2][3]=new Option("大1中2小3","http://www.google.cn");
secondGroup[1][3][0]=new Option("请选择"," ");
secondGroup[1][3][1]=new Option("大1中3小1","http://www.google.cn");
secondGroup[1][3][2]=new Option("大1中3小2","http://www.google.cn");
secondGroup[1][4][0]=new Option("请选择"," ");
secondGroup[1][4][1]=new Option("大1中4小1","http://www.google.cn");
secondGroup[2][0][0]=new Option("请选择"," ");
secondGroup[2][1][0]=new Option("请选择"," ");
secondGroup[2][1][1]=new Option("大2中1小1","http://www.google.cn");
secondGroup[2][1][2]=new Option("大2中1小2","http://www.google.cn");
secondGroup[2][1][3]=new Option("大2中1小3","http://www.google.cn");
secondGroup[2][2][0]=new Option("请选择"," ");
secondGroup[2][2][1]=new Option("大2中2小1","http://www.google.cn");
secondGroup[2][2][2]=new Option("大2中2小2","http://www.google.cn");
secondGroup[3][0][0]=new Option("请选择"," ");
secondGroup[3][1][0]=new Option("请选择"," ");
secondGroup[3][1][1]=new Option("大3中1小1","http://www.google.cn");
secondGroup[3][1][2]=new Option("大3中1小2","http://www.google.cn");
secondGroup[3][1][3]=new Option("大3中1小3","http://www.google.cn");
secondGroup[3][2][0]=new Option("请选择"," ");
secondGroup[3][2][1]=new Option("大3中2小1","http://www.google.cn");
secondGroup[3][2][2]=new Option("大3中2小2","http://www.google.cn");
secondGroup[4][0][0]=new Option("请选择"," ");
secondGroup[4][1][0]=new Option("请选择"," ");
secondGroup[4][1][1]=new Option("大4中1小1","http://www.google.cn");
secondGroup[4][1][2]=new Option("大4中1小2","http://www.google.cn");
secondGroup[4][1][3]=new Option("大4中1小3","http://www.google.cn");
secondGroup[4][2][0]=new Option("请选择"," ");
secondGroup[4][2][1]=new Option("大4中2小1","http://www.google.cn");
secondGroup[4][2][2]=new Option("大4中2小2","http://www.google.cn");
secondGroup[5][0][0]=new Option("请选择"," ");
secondGroup[5][1][0]=new Option("请选择"," ");
secondGroup[5][1][1]=new Option("大5中1小1","http://www.google.cn");
secondGroup[5][1][2]=new Option("大5中1小2","http://www.google.cn");
secondGroup[5][1][3]=new Option("大5中1小3","http://www.google.cn");
secondGroup[5][2][0]=new Option("请选择"," ");
secondGroup[5][2][1]=new Option("大5中2小1","http://www.google.cn");
secondGroup[5][2][2]=new Option("大5中2小2","http://www.google.cn");
secondGroup[6][0][0]=new Option("请选择"," ");
secondGroup[6][1][0]=new Option("请选择"," ");
secondGroup[6][1][1]=new Option("大6中1小1","http://www.google.cn");
secondGroup[6][1][2]=new Option("大6中1小2","http://www.google.cn");
secondGroup[6][1][3]=new Option("大6中1小3","http://www.google.cn");
secondGroup[6][2][0]=new Option("请选择"," ");
secondGroup[6][2][1]=new Option("大6中2小1","http://www.google.cn");
secondGroup[6][2][2]=new Option("大6中2小2","http://www.google.cn");
var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}
function redirect2(){
window.open(temp1.value,"","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no, resizable=no,copyhistory=no,width=700,height=450");
}
//-->
</SCRIPT>
</P>
<P> </P></BODY></HTML>
热心网友
时间：2022-05-14 20:33
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>下拉联动</title>
<script type="text/javascript">
<!--
function select1Change(){
if(document.forms[0].select1.selectedIndex == 1){
document.forms[0].select2.length = 3;
document.forms[0].select2.selectedIndex = 0;
//改成相应的内容就可以了
document.forms[0].select2.options[0].text = "11";
document.forms[0].select2.options[1].text = "12";
document.forms[0].select2.options[2].text = "13";
}
if(document.forms[0].select1.selectedIndex == 2){
document.forms[0].select2.length = 3;
document.forms[0].select2.selectedIndex = 1;
//改成相应的内容就可以了
document.forms[0].select2.options[0].text = "21";
document.forms[0].select2.options[1].text = "22";
document.forms[0].select2.options[2].text = "23";
}
if(document.forms[0].select1.selectedIndex == 3){
document.forms[0].select2.length = 3;
document.forms[0].select2.selectedIndex = 2;
//改成相应的内容就可以了
document.forms[0].select2.options[0].text = "31";
document.forms[0].select2.options[1].text = "32";
document.forms[0].select2.options[2].text = "33";
}
if(document.forms[0].select1.selectedIndex == 4){
document.forms[0].select2.length = 3;
document.forms[0].select2.selectedIndex = 2;
//改成相应的内容就可以了
document.forms[0].select2.options[0].text = "41";
document.forms[0].select2.options[1].text = "42";
document.forms[0].select2.options[2].text = "43";
}
if(document.forms[0].select1.selectedIndex == 5){
document.forms[0].select2.length = 3;
document.forms[0].select2.selectedIndex = 2;
//改成相应的内容就可以了
document.forms[0].select2.options[0].text = "51";
document.forms[0].select2.options[1].text = "52";
document.forms[0].select2.options[2].text = "53";
}
if(document.forms[0].select1.selectedIndex == 6){
document.forms[0].select2.length = 3;
document.forms[0].select2.selectedIndex = 2;
//改成相应的内容就可以了
document.forms[0].select2.options[0].text = "61";
document.forms[0].select2.options[1].text = "62";
document.forms[0].select2.options[2].text = "63";
}
}
function select2Change(obj){
var theSelectedIndex = document.forms[0].select2.selectedIndex;
var content = document.forms[0].select2.options[theSelectedIndex].text;
if(theSelectedIndex == 0){
document.forms[0].select3.length = 3;
document.forms[0].select3.selectedIndex = 0;
//改成相应的内容就可以了
document.forms[0].select3.options[0].text = content + "a";
document.forms[0].select3.options[1].text = content + "b";
document.forms[0].select3.options[2].text = content + "c";
}
if(theSelectedIndex == 1){
document.forms[0].select3.length = 3;
document.forms[0].select3.selectedIndex = 0;
//改成相应的内容就可以了
document.forms[0].select3.options[0].text = content + "a";
document.forms[0].select3.options[1].text = content + "b";
document.forms[0].select3.options[2].text = content + "c";
}
if(theSelectedIndex == 2){
document.forms[0].select3.length = 3;
document.forms[0].select3.selectedIndex = 0;
//改成相应的内容就可以了
document.forms[0].select3.options[0].text = content + "a";
document.forms[0].select3.options[1].text = content + "b";
document.forms[0].select3.options[2].text = content + "c";
}
}
-->
</script>
</head>
<body>
<h1>下拉联动</h1>
<hr />
<form name="form1" id="form1">
<select id="select1" name="menu1" onchange="select1Change('select1')">
<option value="-1" >请选择</option>
<option value="a" >1</option>
<option value="b" >2</option>
<option value="c" >3</option>
<option value="a" >4</option>
<option value="b" >5</option>
<option value="c" >6</option>
</select>
<select id="select2" name="menu2" onchange="select2Change(this)">
<option>请选择</option>
</select>
<select id="select3" name="menu3">
<option>请选择</option>
</select>
</form>
</body>
</html>
热心网友
时间：2022-05-14 22:25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeType1(){
var type1=document.getElementById("type1");
var type2=document.getElementById("type2");
var type3=document.getElementById("type3");
type2.options.length=1;
type3.options.length=1;
type2.options[0].value="default";
type2.options[0].text="---";
type3.options[0].value="default";
type3.options[0].text="---";
if(type1.value!="default"){
for(var i=1;i<11;i++){
var value=type1.value+"->中类"+i;
var text=type1.value+"->中类"+i;
var option=new Option(text,value);
type2.options[type2.length]=option;
}
}
}
function changeType2(){
var type2=document.getElementById("type2");
var type3=document.getElementById("type3");
type3.options.length=1;
type3.options[0].value="default";
type3.options[0].text="---";
if(type2.value!="default"){
for(var i=1;i<11;i++){
var value=type2.value+"->小类"+i;
var text=type2.value+"->小类"+i;
var option=new Option(text,value);
type3.options[type3.length]=option;
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<select id="type1" onchange="changeType1()">
<option value="default">---</option>
<option value="大类1">大类1</option>
<option value="大类2">大类2</option>
<option value="大类3">大类3</option>
</select>
<select id="type2" onchange="changeType2()">
<option id="default">---</option>
</select>
<select id="type3">
<option id="default">---</option>
</select>
</BODY>
</HTML>
