在公司写了一个两级下拉框,用了Jquery框架,初次简单的使用了一下,感觉很好,以后用的机会会很多。
JSP页面的代码:
<table>
<tr>
<td>
<select class="inputitem" name="sheng" id="sheng" style="width:98px;color:#003366" onChange="abc();">
<option selected value="0">选择省份</option>
<% Iterator it=list.iterator();
while(it.hasNext()){
Sheng sheng=(Sheng)it.next();
%>
<option value="<%=sheng.getSid() %>" ><%=sheng.getSheng() %></option>
<%
}
%>
</select>
->
</td>
<td id = "aa">
<select id="a" >
<option value="0">选择市</option>
</select>
</td>
</tr>
</table>
JS关键代码:
<script>
function abc(){
var sheng=document.getElementById('sheng').value;
$.get("shi.do?t="+Math.random()+"&shengID="+sheng,function callback(data){ //将节点的数据发给服务端/shi ,当加载成功时调用function (data)
$("#aa").html(data); //将从服务端的数据输入到id ="aa"的标签里。
});
}
</script>
Action代码:
ServletOutputStream out=response.getOutputStream(); //获得ServletOutputStream的对象out
StringBuffer sb=new StringBuffer();
sb.append("<select name='shi' id='shi' align='left'><option value='0' id='s'>选择市</option>");
for(int i=0;i<list.size();i++){
Shi shi=list.get(i);
sb.append("<option value="+shi.getSid()+">"+shi.getShi()+"</option>");
}
sb.append("</select>");
out.print(sb.toString());//输出字符串数据到JSP页面上
截了一个图,好像看不出效果。
分享到:
相关推荐
JavaScript(通常是jQuery库)会监听一级下拉框的`change`事件,当用户选择一项时,触发Ajax请求,服务器返回新的下拉框选项,然后动态更新二级下拉框。 **实现步骤:** 1. 创建HTML结构,包括两个下拉框。 2. 使用...
1. 创建HTML结构,定义两个下拉框,并使用jQuery绑定事件监听器,当一级下拉框改变时,触发Ajax请求。 2. 使用jQuery的`$.ajax`或`$.getJSON`方法向服务器发送请求,获取JSON数据。 3. 在Servlet中,处理请求,查询...
`location.js` 和 `YLChinaArea.js` 是两个关键的JavaScript文件,它们可能包含了实现联动下拉框的代码。`location.js` 可能是主要的入口文件,用于初始化和管理整个联动过程,而`YLChinaArea.js` 可能包含全国各省...
在这个特定的场景中,我们讨论的是如何使用Ajax实现二级下拉框的联动,以及涉及到的技术如Servlet、Java和XMLHttp。 首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的...
本资源“jQuery选择日期时间下拉框代码.zip”提供了基于Vue.js框架实现的日期时间下拉框解决方案,对于提升用户体验和增强网页交互性有着显著作用。 首先,Vue.js是一个轻量级的JavaScript框架,以其数据绑定和组件...
在这个插件中,可能会有一个主文件(如`jquery.dropdown.js`),该文件定义了与下拉框相关的所有功能,包括初始化、事件绑定、选择项管理等。此外,可能还会有其他辅助文件,比如实现特定动画效果的函数库。 为了...
在jQuery仿百度搜索下拉框的功能实现上,typeahead.js通过监听用户的输入事件,实时查询后台数据,并将匹配的结果动态渲染到下拉框中,让用户在输入过程中就能预览可能的搜索结果。 在使用typeahead.js时,我们需要...
在本文中,我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果,这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容,例如在选择省份后,...
**jQuery 带搜索的下拉框:Chosen 插件详解** 在Web开发中,我们经常遇到需要创建带有搜索功能的下拉框,以便用户能够更高效地找到他们想要的选项。`jQuery Chosen`插件就是这样一个强大的工具,它能够将传统的...
因此,这个页面可能用于实现省市区联动的功能,即用户先选择省份,接着二级下拉框会自动更新显示该省份下的城市。 实现二级下拉框联动含数据库的基本步骤如下: 1. **数据库设计**:创建一个包含省份和城市的...
在这个案例中,"jquery实现select下拉框美化特效源码.zip"提供了一个实用的解决方案,帮助开发者在项目中实现更高级的下拉框效果,无需从零开始编写复杂的JavaScript代码。通过学习和运用这个插件,你可以更好地掌握...
本篇文章将深入探讨如何利用jQuery和Layui来实现一个具有搜索功能的下拉框。 首先,jQuery是一个强大的JavaScript库,它的API简洁易用,提供了许多方便的函数来处理DOM操作、事件处理、动画效果以及Ajax请求。Layui...
实现级联下拉框效果,我们通常需要两个或多个`<select>`元素,并通过JavaScript监听第一个下拉框的`change`事件。当用户更改选择时,触发事件处理函数,根据选定的值动态更新第二个下拉框的选项。 以下是一个简单的...
现在,我们将这两个工具结合起来,实现一个搜索下拉框的功能。这个功能主要包含以下几个部分: 1. **HTML结构**:首先,我们需要在HTML页面中创建一个输入框和一个下拉框。输入框用于用户输入搜索关键词,下拉框则...
首先,jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画以及Ajax交互。在1.4.1版本中,jQuery已经非常成熟,提供了丰富的API和功能,足以支持这种复杂的交互效果。 要实现这...
在网页设计中,二级联动下拉框是一种常见的交互元素,常用于地区选择、产品分类等场景,用户在选择一级选项后,二级下拉框会显示与之相关的子选项。JavaScript作为客户端脚本语言,是实现这种功能的重要工具。这篇...
这个“jQuery省市区三级联动下拉框”是一个利用jQuery库实现的解决方案,它基于jQuery 1.8.2的迷你版本(jquery-1.8.2.min.js)进行构建。下面我们将详细探讨这一技术实现及其相关知识点。 首先,jQuery是一个广泛...
综上所述,使用jQuery(或者可能是Axjx)实现两级联动下拉框,需要结合HTML、JavaScript/jQuery、CSS以及后端API共同协作完成。通过监听用户在一级下拉框中的选择,动态地更新二级下拉框的内容,以提供流畅且高效的...
4. JavaScript和jQuery:为了实现联动效果,通常会在前端使用JavaScript或jQuery来监听一级下拉框的“change”事件。当事件触发时,发送Ajax请求到服务器,获取新的二级下拉框数据,并更新到DOM中。 5. Ajax:ASP...
5. 三级联动的具体实现中,需要注意的是,当一级下拉框的选项发生改变时,需要清空二级和三级下拉框中的内容,并重新加载数据。这可以通过调用`combobox("clear")`方法来实现。同样的,也需要设置二级和三级下拉框的...