html五级联动下拉框
黄色下拉框为必选。【绿色下拉框任选其一，另三个下拉框联动对应一行数字】辉色部分不显示，显示下拉框部分就行了<!doctypehtml><html><head><metac...
黄色下拉框为必选。【绿色下拉框任选其一，另三个下拉框联动对应一行数字 】辉色部分不显示，显示下拉框部分就行了<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><link rel="stylesheet" type="text/css" href="CSS3/xuanxing.css" /></head><body><div style="width: 400px; height: 20px; margin:0 auto; word-spacing: 0px;"> <select style="width: 75px; font-size: 12px; color: #000000; font-family: '宋体'; margin: auto 0px"> <option>10mm</option> <option>20mm</option> <option>40mm</option> </select> <select style="width: 75px; font-size: 12px; color: #000000; font-family: '宋体';"> <option>8n</option> <option>12n</option> <option>16n</option> <option>24n</option> <option>28n</option> <option>32n</option> <option>40n</option> <option>44n</option> </select> <select style="width: 75px; font-size: 12px; color: #000000; font-family: '宋体';"> <option>110mm</option> <option>150mm</option> <option>230mm</option> <option>270mm</option> <option>310mm</option> <option>390mm</option> <option>430mm</option> </select> <select style="width: 75px; font-size: 12px; color: #000000; font-family: '宋体';"> <option>190mm</option> <option>230mm</option> <option>310mm</option> <option>350mm</option> <option>390mm</option> <option>470mm</option> <option>510mm</option> </select> <select style="width: 75px; font-size: 12px; color: #000000; font-family: '宋体';"> <option>ESA1210</option> <option>ESA1610</option> <option>ESA2410</option> <option>ESA2810</option> <option>ESA3210</option> <option>ESA4010</option> <option>ESA4410</option> </select></div></body></html>
展开
1个回答
展开全部
按说这种操作应该是后台程序来做，前端操作的话有点窒息，主要是数据量。。亲测有效，望采纳！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="CSS3/xuanxing.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<style>
select{ width:75px; font-size:12px; color:#000000; font-family:'宋体'; margin:auto 0px;}
#select0{ background:yellow;}
.select{ background:#85e785;}
</style>
<script>
$(document).ready(function(e) {
$("select#select0").change(function(){
var cc = $(this).find("option:selected").attr("class");
$(this).siblings("select").find("option").hide();
$(this).siblings("select").find("option."+cc).show();
$(this).siblings("select").find("option."+cc+":first").attr("selected","selected");
});
$("select.select").change(function(){
var cid = $(this).find("option:selected").index();
$(this).siblings("select.select").each(function(){
$(this).find("option").eq(cid).attr("selected","selected");
});
});
});
</script>
<div style="width: 400px; height: 20px; margin:0 auto; word-spacing: 0px;">
<select id="select0">
<option class="op0">10mm</option>
<option class="op1">20mm</option>
<option class="op2">40mm</option>
</select>
<select class="select">
<option class="op0">8n</option>
<option class="op0">12n</option>
<option class="op0">16n</option>
<option class="op1">24n</option>
<option class="op1">28n</option>
<option class="op1">32n</option>
<option class="op2">40n</option>
<option class="op2">44n</option>
</select>
<select class="select">
<option class="op0">70mm</option>
<option class="op0">110mm</option>
<option class="op0">150mm</option>
<option class="op1">230mm</option>
<option class="op1">270mm</option>
<option class="op1">310mm</option>
<option class="op2">390mm</option>
<option class="op2">430mm</option>
</select>
<select class="select">
<option class="op0">128mm</option>
<option class="op0">190mm</option>
<option class="op0">230mm</option>
<option class="op1">310mm</option>
<option class="op1">350mm</option>
<option class="op1">390mm</option>
<option class="op2">470mm</option>
<option class="op2">510mm</option>
</select>
<select class="select">
<option class="op0">ESA0810</option>
<option class="op0">ESA1210</option>
<option class="op0">ESA1610</option>
<option class="op1">ESA2410</option>
<option class="op1">ESA2810</option>
<option class="op1">ESA3210</option>
<option class="op2">ESA4010</option>
<option class="op2">ESA4410</option>
</select>
</div>
</body>
</html>
<!---->
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
