select效果联动

时间:2023-03-09 05:48:32
select效果联动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'mylist_liti.jsp' starting page</title>
<script language="javascript"> var cateArray = new Array(); cateArray[cateArray.length]=new Array("1","新能源");
cateArray[cateArray.length]=new Array("2","自然吸气发动机"); var titleArray = new Array(); titleArray[titleArray.length]=new Array("1","1","续航里程"); titleArray[titleArray.length]=new Array("2","2","排量"); function setTitle(obj1ID,obj2ID){
var objCate = document.getElementById(obj1ID);
var objTitle = document.getElementById(obj2ID);
var i;
var itemArray = null;
if(objCate.value.length > 0){
itemArray = new Array();
for(i=0;i<titleArray.length;i++){
if(titleArray[i][0]==objCate.value){
itemArray[itemArray.length]=new Array(titleArray[i][1],titleArray[i][2]);
}
}
}
for(i = objTitle.options.length ; i >= 0 ; i--){
objTitle.options[i] = null;
}
objTitle.options[0] = new Option("请选择职称");
objTitle.options[0].value = "";
if(itemArray != null){
for(i = 0 ; i < itemArray.length; i++){
objTitle.options[i+1] = new Option(itemArray[i][1]);
if(itemArray[i][0] != null){
objTitle.options[i].value = itemArray[i][0];
}
}
} }
</script>
</head> <body
style="background: url(${ctx }/images/iframe_bg.gif) repeat-x; margin: 2px;"> <div id="create"
style="border: 1px solid #84a1bd; margin: 10px 250px; ">
<form name="createForm"
action="${ctx}/sys/tea.do?method=createTea" method="post">
<table width="60%" align="center" cellpadding="0" cellspacing="0"
style="font-size: 13px;"> <tr>
<td align="center" width="28%" height="30">
职称类型
</td>
<td align="left">
&nbsp;&nbsp;
<select name="cateid" id="cateid" onChange="setTitle('cateid','titleid')">
<option value="">请选职称类型</option>
<option value="1" >
新能源
</option>
<option value="2">
自然吸气发动机
</option>
</select> </td>
</tr>
<tr>
<td align="center" width="28%" height="30">
职 &nbsp;&nbsp;&nbsp;&nbsp;称
</td>
<td align="left">
&nbsp;&nbsp;
<select name="title" id="titleid">
<option value="暂无">
请选职称
</option>
</select> </td>
</tr> </table>
</form>
</div> <br />
</body>
</html>

在select联动中使用了调用了onChange的方法,其中设置了array进行级联显示

显示效果

select效果联动

2017-04-19