Jquery动态操作下拉列表(s:select)
程序员文章站
2022-07-08 16:21:13
...
项目背景：Struts2 + Jquery-3.3.1.js
项目需求：页面初始化时，从Struts2的Action端将各个省，市的列表读取到列表(List)变量中，省份一个列表(List)，每个市一个列表(List)。在画面(JSP)选择省份的时候，市需要关联变化，即显示为各个省自己的管辖市。
注：项目中没有用到AJAX，JSON，所以谈不上真正的动态。
感想：设计上有些奇怪，用一个列表(List)即可实现。尝试了将列表(List)存储在隐藏域(s:hidden)中，当使用Jquery读取的时候，取出的是对象类名，无法取到对象内容。遂将列表(List)直接存储到隐藏的下拉列表(s:select)里面，使用Jquery根据所选省份动态生成市下拉列表中的内容。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selProvince').change(function(){
if($(this).val() == "1"){
var selCity = $('#selCity0 option');
}else if($(this).val() == "2"){
var selCity = $('#selCity1 option');
}else if($(this).val() == "3"){
var selCity = $('#selCity2 option');
}
setselCity(selCity);
});
});
function setselCity(selProvince){
$('#selCity').empty();
$('#selCity').append("<option></option>");
selProvince.each(function(){
var option = "<option value='" + $(this).val() + "'>" + $(this).text(); + "</option>";
$('#selCity').append(option);
});
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<colgroup>
<col style="width:60px;text-align:right;">
<col style="width:150px;text-align:left;">
<col style="width:60px;text-align:right;">
<col style="width:150px;text-align:left;">
</colgroup>
<tr>
<td>省份</td>
<td>
<s:select theme="simple" id="selProvince" name="selProvince" list="#{'':'','1':'辽宁','2':'吉林','3':'黑龙江'}" />
</td>
<td>市</td>
<td>
<s:select theme="simple" id="selCity" name="selCity" list="#{}"></s:select>
</td>
</tr>
</table>
<s:select style="display:none" id="selCity0" name="selCity0" list="#{'1':'沈阳','2':'大连','3':'营口'}"></s:select>
<s:select style="display:none" id="selCity1" name="selCity1" list="#{'1':'长春','2':'吉林','3':'延吉'}"></s:select>
<s:select style="display:none" id="selCity2" name="selCity2" list="#{'1':'哈尔滨','2':'齐齐哈尔','3':'漠河'}"></s:select>
</body>
</html>
上一篇： VBA文件处理(UTF-8)
下一篇： 日英键盘切换