jsp页面JavaScript select 的onchange事件
两个select，其中第一个selectonchange监听，另一个select如何接收信息（即显示相应的选项）...
两个select，其中第一个select onchange监听，另一个select如何接收信息（即显示相应的选项）
展开
1个回答
展开全部
给你个例子自己慢慢看
<!-- 该javascript用来生成二级联动菜单 -->
<script type="text/javascript">
/*声明两个数组，以便区别，具体操作，应该是通过底层返回一个list*/
var one = new Array("白色","红色","黄色");
var two = new Array("黑色","蓝色","灰色");
/*该函数，控制二级级联操作*/
function specieSelChange(selBox)
{
/*
这些数据需要重数据库中取，我没有连接数据库，所以自己拟定数据，数据封装根据具体情况而定
这是第二级菜单，需要级联的菜单
*/
var str = "<select>";
if(selBox.value == "A")
{
for(var i = 0; i < one.length; i ++)
{
str += "<option>" + one[i] + "</option>";
}
}
else if(selBox.value == "B")
{
for(var i = 0; i < two.length; i ++)
{
str += "<option>" + two[i] + "</option>";
}
}
str += "</select>";
document.all('Linkage').innerHTML = str;
}
</script>
</head>
<body>
<!-- 页面开始解析数据 首先是第一个下拉框-->
<table border="0" align="center" style="font-size: 12px;">
<tr>
<td>请选择种类:</td>
<td>
<!-- 页面使用循环取出数据 如果需要更标准，请使用jstl标签，或者struts标签 -->
<select id="SpecieSel" onchange="specieSelChange(this)">
<%
Iterator it = mapOne.entrySet().iterator();
while(it.hasNext()){
Map.Entry entry = (Map.Entry)it.next();
%>
<option value="<%=(String)entry.getKey() %>">
<%=(String)entry.getValue() %>
</option>
<%} %>
</select>
</td>
</tr>
<!-- 第二个下拉框，开始执行二级联动 -->
<tr>
<td>
二级联动下拉框:
</td>
<td id="Linkage">
<!-- 该下拉框，使用自动生成 -->
<select>
<option>---请选择---</option>
</select>
</td>
</tr>
</table>
</body>
</html>
<!-- 该javascript用来生成二级联动菜单 -->
<script type="text/javascript">
/*声明两个数组，以便区别，具体操作，应该是通过底层返回一个list*/
var one = new Array("白色","红色","黄色");
var two = new Array("黑色","蓝色","灰色");
/*该函数，控制二级级联操作*/
function specieSelChange(selBox)
{
/*
这些数据需要重数据库中取，我没有连接数据库，所以自己拟定数据，数据封装根据具体情况而定
这是第二级菜单，需要级联的菜单
*/
var str = "<select>";
if(selBox.value == "A")
{
for(var i = 0; i < one.length; i ++)
{
str += "<option>" + one[i] + "</option>";
}
}
else if(selBox.value == "B")
{
for(var i = 0; i < two.length; i ++)
{
str += "<option>" + two[i] + "</option>";
}
}
str += "</select>";
document.all('Linkage').innerHTML = str;
}
</script>
</head>
<body>
<!-- 页面开始解析数据 首先是第一个下拉框-->
<table border="0" align="center" style="font-size: 12px;">
<tr>
<td>请选择种类:</td>
<td>
<!-- 页面使用循环取出数据 如果需要更标准，请使用jstl标签，或者struts标签 -->
<select id="SpecieSel" onchange="specieSelChange(this)">
<%
Iterator it = mapOne.entrySet().iterator();
while(it.hasNext()){
Map.Entry entry = (Map.Entry)it.next();
%>
<option value="<%=(String)entry.getKey() %>">
<%=(String)entry.getValue() %>
</option>
<%} %>
</select>
</td>
</tr>
<!-- 第二个下拉框，开始执行二级联动 -->
<tr>
<td>
二级联动下拉框:
</td>
<td id="Linkage">
<!-- 该下拉框，使用自动生成 -->
<select>
<option>---请选择---</option>
</select>
</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
