项目背景: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>
相关推荐
jQuery三级下拉列表导航菜单 jQuery三级下拉列表导航菜单 jQuery三级下拉列表导航菜单 jQuery三级下拉列表导航菜单 jQuery三级下拉列表导航菜单
使用Jquery,對下拉列表的操作,很全面,很實用。
jquery模仿下拉列表selectBox插件
使用jquery做的div下拉框,下拉列表。
自己做了三个专门用来操作下拉列表框(select)的jquery插件,一是通过ajax方式填充列表项的FillOptions, 二是下拉列表框的联动插件CascadingSelect,三是手动添加列表项的AddOption插件 具体说明请看这里 ...
jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable
本文实例讲述了jQuery实现动态加载select下拉列表项功能。分享给大家供大家参考,具体如下: 需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的。现在项目中的select需要根据不同的...
jquery搜索框下拉列表选择搜索分类效果.rar
但其中没有实现动态产生select option下拉列表。 在jQuery环境之下使用创建jQuery对象来实现动态产生,那是很方便的事情。 在数据库中准备一些数据: 存储过程: 开发ASP.NET MVC,实现程序,少不了model: 现...
Ztree jquery 下拉数 下拉列表(多选) 适用 方便,提高开发效率
jquery动态下拉菜单
jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击...
jQuery手机移动端下拉列表选择代码
jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单。
下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select
此代码就是使用jquery简单实现级联下拉列表,
jquery自动滚动下拉列表框
jQuery多级下拉菜单支持多级下拉列表菜单,适用于商城网站或者企业网站,php中文网推荐下载!
jQuery Stylish Select 是一款jQuery Select下拉列表外观自定义插件,把Select下拉框美化成圆角的样式,另外颜色也不一样了,下拉列表中每个item的背景色也添加了.本Select美化用到了jquery了,在最新的jquery版本下未...