<SCRIPT type="text/javascript">
var req;
window.onload=function(){
}
function Change_Select(url, parentInputId, childInputId)
{
var parentInputValue = document.getElementById(parentInputId).value;
var showUrl = url + "&parentInputId="+ parentInputId + "&parentInputValue=" + parentInputValue;
//alert(showUrl);
showUrl=encodeURI(showUrl);
//alert(showUrl);
showUrl=encodeURI(showUrl);
//alert(showUrl);
if(window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}else if(window.ActiveXObject)
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
if(req)
{
req.open("GET",showUrl,true);
req.onreadystatechange= function() {
callback(childInputId);
}
req.send(null);
}
}
function callback(childInputId)
{
if(req.readyState == 4)
{
if(req.status == 200)
{
parseMessage(childInputId);
}else{
// Not able to retrieve descriptionInvalid URI: isHexDigit
alert("Not able to retrieve description"+req.statusText);
}
}
}
function parseMessage(childInputId)
{
//alert();
var xmlDoc=req.responseXML.documentElement;
if(xmlDoc == 'null') {
alert("xmlDoc="+xmlDoc);
}
var xSel=xmlDoc.getElementsByTagName('select');
var select_child=document.getElementById(childInputId);
var select_child_length = select_child.options.length;
for(var i = select_child_length-1; i >= 0; i--){
select_child.remove(i);
}
//alert("xSel.length="+xSel.length);
for(var i=0;i<xSel.length;i++)
{
var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
var xText=xSel[i].childNodes[1].firstChild.nodeValue;
var option=new Option(xText,xValue);
try{
select_child.options.add(option);
}catch(e){
}
}
}
</SCRIPT>
HTML调用:
<select id="parentId" onChange="Change_Select('seriesTextboxAction.do', 'parentId', 'childId')">
<option value="">- Select One -</option>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id="childId">
<option value="">- Select One -</option>
</select>
JAVA(Action)调用:
List<DropTo> dropList = Data List(from DB or other file);
int childListSize = dropList.size();
response.setContentType("text/xml"); response.setHeader("Cache-Control","no-cache");
StringBuffer buffer = new StringBuffer();
buffer.append("<selects>");
if(childListSize > 0) {
for(int i = 0; i < childListSize; i ++) {
DropTo dropFromDB = dropList.get(i);
String showKey = dropFromDB.getShowKey();
String showValue = dropFromDB.getHiddenValue();
System.out.println("showKey="+showKey+" showValue="+showValue);
buffer.append("<select><value>").append(showKey).append("</value>");
buffer.append("<text>").append(showValue).append("</text></select>");
}
buffer.append("</selects>");
response.getWriter().write(buffer.toString());
response.getWriter().flush();
response.getWriter().close();
}
Struts:
<action name="seriesTextboxAction" class="xxxx.SeriesTextboxAction">
<result name="success"></result>
</action>
分享到:
相关推荐
3. **JavaScript或AJAX**:当一级下拉框的`onchange`事件触发时,通过AJAX向服务器发送请求,获取新的二级下拉框数据,并更新DOM。 4. **数据库连接**:在`conn.asp`文件中,通常包含数据库连接代码,使用ADO...
在IT行业中,二级下拉框联动是一个常见的交互设计,它常用于网页表单或应用程序中,使得用户在选择一个选项后,第二个下拉框会自动更新其内容,以展示与前一个选择相关的数据。这种技术尤其适用于有层级关系的数据...
在网页设计中,二级下拉框联动是一种常见的交互方式,特别是在数据量较大、分类层次分明的情况下,能够有效地帮助用户快速筛选和定位所需信息。本文将详细介绍如何使用JSP(JavaServer Pages)技术来实现这样的功能...
标题"Asp.net二级下拉框无刷新联动"所涉及的核心技术是JavaScript、Ajax以及服务器端的C#或VB.NET编程。这里的关键在于利用Ajax异步通信,实现前后端数据的快速交换,同时结合客户端的JavaScript事件监听,来驱动二...
首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的城市。这种功能的核心是,当用户在一级下拉框中选择一个选项时,系统会异步地(即不刷新整个页面)获取并填充二级下拉框...
Smarty + Ajax 下拉菜单二级联动: 1. 建立数据库ajaxtest (使用utf8) 2. 进行conn.php 修改root密码 3. 导入表 product.sql --- 主产品 4. 导入表 producttest.sql -- 二级产品 弄好后运行:...
例如,一级下拉框选择省份后,二级下拉框会自动更新为对应省份的城市列表。 在提供的`fzzx.zip`压缩包中,包含了一个名为`a.html`的文件,这个文件很可能是用来展示如何实现layui下拉框二级联动的示例代码。打开这...
当用户在一级或二级下拉框中做出选择时,触发事件,发送Ajax请求到服务器。 4. **Ajax请求**:当事件触发后,JavaScript会构造一个XMLHttpRequest对象,发送GET或POST请求到服务器端的处理程序,如Servlet或PHP。...
当用户在一级下拉框选择某个选项时,二级下拉框会根据所选内容动态加载相关数据,以此类推。这种效果可以通过Ajax实现,每级下拉框的选项改变时,都触发一个Ajax请求,获取并填充下一级别的选项。 三、实现步骤 1. ...
JavaScript(通常是jQuery库)会监听一级下拉框的`change`事件,当用户选择一项时,触发Ajax请求,服务器返回新的下拉框选项,然后动态更新二级下拉框。 **实现步骤:** 1. 创建HTML结构,包括两个下拉框。 2. 使用...
在网页开发中,"JQuery+年月日三级下拉框联动"是一个常见的交互设计,主要用于用户输入日期的场景,例如填写表单时选择出生日期。这个设计涉及到JavaScript库JQuery的使用,以及HTML下拉框(select)的动态联动效果...
当用户在第一级下拉框选择国家时,`change`事件触发,执行相应的JavaScript函数,更新第二级下拉框的选项。 4. **数据结构**:通常,这些数据(国家、省份和城市)会被存储在一个合适的结构中,如对象数组或JSON...
在网页开发中,有时我们需要创建一个用户友好的界面来选择日期,这通常涉及到年、月、日的三级下拉框联动。"JQuery年月日三级下拉框联动"就是一个解决此类需求的方案,它利用JavaScript库JQuery的便利性和高效性,...
在本文中,我们将探讨如何在一个JSP页面上实现二级下拉框联动,并实时从数据库获取数据。这是一个常见的需求,尤其在构建动态Web应用程序时,它能够提供用户友好的交互体验,帮助用户根据他们的选择过滤和展示相关...
当用户在一级下拉框中做出选择时,会触发一个Ajax请求,控制器根据请求的数据返回对应的二级下拉框选项。 2. 视图(Views):视图负责渲染页面,包括下拉框的HTML结构。在ASP.NET MVC中,视图通常使用Razor语法编写...
Servlet返回市的JSON数据后,前端JavaScript需要解析这个响应,并将数据填充到二级下拉框中。同样,当用户选择一个市时,再次使用Ajax请求获取对应的区/县,更新三级下拉框。 5. **HTML和JavaScript**: 页面的...
本文将详细讨论“下拉框二级联动”这一主题,以及如何利用AJAX和JSON技术来实现这一功能。 首先,我们要理解什么是二级联动。在多级选择的场景下,二级联动指的是当用户在一个下拉框(Dropdown)中做出选择时,第二...
这种效果是通过Ajax实现的,当用户在一级下拉框中做出选择时,触发Ajax事件,向服务器发送请求获取对应的数据,然后在二级下拉框中动态填充这些数据。 **无刷新查询** 无刷新查询是Ajax的重要应用之一,它实现了在...