项目背景：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>
相关推荐
1. **HTML结构**：仿Select通常使用`<ul>`和`<li>`元素来构建下拉列表的基础结构。`<ul>`作为容器，包含多个`<li>`元素，每个`<li>`代表一个选项。这样的结构使得我们可以轻松地应用CSS样式，并实现类似原生下拉框的...
在收到Action返回的List后，使用JSTL（JavaServer Pages Standard Tag Library）或其他标签库，如Struts的<s:select>标签，将数据绑定到下拉列表。 5. **Ajax技术**：为了实现动态加载，我们通常会使用Ajax异步请求...
本篇将深入探讨如何使用`JQuery UI` 创建一个可输入内容且能自动匹配的下拉列表，即所谓的“组合下拉列表”。 首先，我们需要了解`JQuery UI`的`Autocomplete`组件。`Autocomplete` 是一个基于输入框的插件，当用户...
在Bootstrap中，下拉列表（Dropdown）是一种常见的交互元素，常用于导航菜单、表单选择等场景。本篇文章将深入探讨如何利用Bootstrap进行下拉列表的美化，以提升用户体验。 首先，我们来了解Bootstrap下拉列表的...
在Struts2中，可以通过`s:select`标签来创建下拉列表，并通过`headerKey`和`headerValue`属性添加提示信息。 5. 工具使用：标签中的“工具”可能指的是开发者在实现下拉列表提示功能时可能会用到的各种开发工具，如...
jQuery Country Select 是 jQuery 的“国家/地区选择器/选择器”插件，它使用所有可用国家/地区填充选择下拉列表并确保选择正确的值。 该插件在不进行任何样式更改的情况下填充下拉列表，使其与大多数任何 UI 样式...
在本文中，我们将深入探讨如何使用jQuery和CSS3来实现一个具有上下滚动效果的下拉选择列表。这个功能尤其适用于那些包含大量选项的下拉菜单，因为它提供了更友好的用户体验，用户无需滚动整个页面，只需在下拉框内...
此外，还定义了其他一些功能，例如，通过jQuery.fn.extend()方法扩展了jQuery的功能，使得可以通过.sSelect方法来操作select元素。然后，为每个select元素创建了一个唯一的标识符，并且根据当前选中的option来初始化...
这种功能允许用户在选择省份后，城市列表会自动更新，提供相应的下拉选项。本篇文章将深入探讨如何使用Struts2、jQuery、ajax以及MySQL来实现这一功能。 首先，Struts2是一款强大的MVC（模型-视图-控制器）框架，它...
例如，`<s:select>`标签可以用来创建一个下拉列表，它的选项可以通过Action传递的数据动态生成。当用户选择省份时，会触发一个Ajax请求，Struts2会处理这个异步请求并返回城市数据，然后JavaScript（可能使用jQuery...
这段代码定义了一个jQuery插件`setSelect`，该插件接受一系列参数，包括下拉菜单的选项数组（`optionList`）、隐藏输入元素的选择器（`hiddenInput`）、显示所选选项的元素选择器（`getOption`）以及一个回调函数（`...
在Web开发中，我们经常需要通过JavaScript或者jQuery等库来动态更新Select元素，以便根据用户交互或其他数据源来改变下拉列表的内容。 首先，我们需要了解HTML的`<select>`标签，它用于创建一个下拉列表，而`...
7. **编写JSP页面**：使用Struts2的标签库，如`s:select`，创建两个下拉列表。第一个下拉列表的选项来源于省份列表，第二个下拉列表的选项在JavaScript或jQuery中动态加载，根据用户在第一个下拉框的选择，通过Ajax...
总结一下，实现一个带搜索框的jQuery下拉菜单主要涉及到以下步骤： 1. 引入`chosen.css`以设定下拉菜单样式。 2. 引入`jQuery.js`以使用jQuery库。 3. 设置`<asp:DropDownList>`控件的属性，如`data-placeholder`、`...
4. **`<s:select>`**：这个标签创建一个下拉列表，例如： ```jsp <s:select name="传递参数名" id="取值用的 id" list="#session.hlist" onchange="项改变事件" listKey="id" listValue="title" headerKey=...
在网页开发中，jQuery 是一个常用的 JavaScript 库，它提供了许多便利的方法来操作 DOM 元素，包括选择、修改和操作 Select 下的 Option 元素。本文将详细讲解如何使用 jQuery 根据一个值来选中 Select 下的 Option...
//潇湘博客 //http://blog.csdn.net/fkedwgwy //PHP 技术群：37304662 //时间:2010-06-13 //版本 v3.0.0.0 //任意字符、中文与拼音综合查询 //方向键选择option //优化下拉框显示效果 //jquery超级select插件 ...
jQuery Select下拉单选和多选美化的实现通常基于jQuery插件，这些插件可以将传统的`<select>`元素转换为更具有交互性的组件。这不仅包括视觉上的改进，如自定义样式和动画效果，还可能包含高级功能，如搜索过滤、...
在示例中，可以看到HTML标签`<input>`和`<s:select>`，它们用于构建用户界面，其中`<s:select>`是Struts2框架的标签，用于创建下拉列表。 2. **表单数据传递**： 在JSP中，表单数据通常通过HTTP请求发送到服务器。...