- 浏览: 88299 次
- 性别:
- 来自: 宜昌
文章分类
最新评论
-
chenaha:
不知道大哥是否会用sencha touch,我想写一个这样的效 ...
用ext读取XML写一个“省-市-邮编”三级联动
var Ajax = function(url, params, callback) {
var reqError = "\u54cd\u5e94\u5f02\u5e38\uff01\uff01\uff01";
var sendData = null;
var createXHR = function () {
var XHR;
if (window.XMLHttpRequest) {
XHR = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
try {
XHR = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
}
return XHR;
};
var processParams = function () {
var ret = "";
for (var p in params) {
ret += "&";
ret += p + "=" + params[p];
}
ret = ret.substring(1);
return ret;
};
var method = (url.indexOf("?") == -1) ? "POST" : "GET";
if (params&&typeof(params)=='object') {
if(typeof(params)=='object'){
if (method == "GET") {
url += "&" + processParams();
} else {
sendData = processParams();
}
}
if(typeof(params)=='string'){
if (method == "GET") {
url += "&" + params;
} else {
sendData = params;
}
}
}
var xhr = createXHR();
xhr.open(method, url, true);
if (method == "POST") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if(callback){
callback(xhr);
};
} else {
window.alert(reqError);
}
}
};
xhr.send(sendData);
};
function DoubleSelect(url){
var select1 = document.createElement('select');
select1.id = 'select1';
select1.name = 'select1';
select1.multiple = 'multiple';
select1.size = '10';
select1.style.width = '230px';
select1.style.height = '150px';
select1.style.margin = '0px';
var select2 = document.createElement('select');
select2.id = 'select1';
select2.name = 'select1';
select2.multiple = 'multiple';
select2.size = '10';
select2.style.width = '230px';
select2.style.height = '150px';
var button1 = document.createElement('button');
button1.value = '分配==>';
button1.style.background = 'url(../../images/header-bg.gif) repeat-x';
button1.style.border = '1px solid #99BBE8';
button1.style.height = '23px';
button1.onclick = function(){
var index = this.doubleselect.select1.selectedIndex;
if(index!=-1){
var sel = this.doubleselect.select1.options[index];
this.doubleselect.select2.options.add(new Option(sel.text,sel.value));
this.doubleselect.select1.options.remove(index);
}
};
var button2 = document.createElement('button');
button2.value = '<==收回';
button2.style.background = 'url(../../images/header-bg.gif) repeat-x';
button2.style.border = '1px solid #99BBE8';
button2.style.height = '23px';
button2.onclick = function(){
var index = this.doubleselect.select2.selectedIndex;
if(index!=-1){
var sel = this.doubleselect.select2.options[index];
this.doubleselect.select1.options.add(new Option(sel.text,sel.value));
this.doubleselect.select2.options.remove(index);
}
};
var table = document.createElement('table');
table.style.width = '520px';
table.style.tableLayout = 'fixed';
var tr = table.insertRow(-1);
var td1 = tr.insertCell();
td1.style.width = '230px';
td1.style.height = '140px';
td1.style.border = '1px solid #99BBE8';
var header1 = document.createElement('div');
header1.style.height = '25px';
header1.style.background = 'url(../../images/header-bg.gif) repeat-x';
header1.style.border = '0px solid #99BBE8';
header1.style.lineHeight = '25px';
header1.style.fontSize = '12px';
header1.style.color = '#15428B';
header1.style.fontWeight = 'bold';
header1.style.paddingLeft = '5px';
header1.innerHTML = '待分配选项';
td1.appendChild(header1);
td1.appendChild(select1);
var td2 = tr.insertCell();
td2.appendChild(button1);
var br1 = document.createElement('br');
var br2 = document.createElement('br');
td2.appendChild(br1);
td2.appendChild(br2);
td2.appendChild(button2);
var td3 = tr.insertCell();
td3.style.border = '1px solid #99BBE8';
td3.style.width = '220px';
td3.style.height = '140px';
var header3 = document.createElement('div');
header3.style.height = '25px';
header3.style.background = 'url(../../images/header-bg.gif) repeat-x';
header3.style.border = '0px solid #99BBE8';
header3.style.lineHeight = '25px';
header3.style.fontSize = '12px';
header3.style.color = '#15428B';
header3.style.fontWeight = 'bold';
header3.style.paddingLeft = '5px';
header3.innerHTML = '已分配选项';
td3.appendChild(header3);
td3.appendChild(select2);
this.table = table;
this.select1 = select1;
this.select2 = select2;
this.button1 = button1;
this.button1.doubleselect = this;
this.button2 = button2;
this.button2.doubleselect = this;
this.url = url;
};
DoubleSelect.prototype.render = function(cnt){
cnt = (typeof(cnt)=="string")?document.getElementById(cnt):cnt;
cnt.appendChild(this.table);
var select1 = this.select1;
Ajax(this.url,null,function(xhr){
var items = xhr.responseXML.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var value = items[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
var text = items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var opt = new Option(text,value);
select1.options.add(opt);
}
});
};
发表评论
文章已被作者锁定,不允许评论。
-
jQuery培训
2013-05-20 23:18 546Jquery是一个优秀的Javascript框架。它是轻量级 ... -
我的UI
2013-05-18 23:48 647(function($) { $.fn.kk = ... -
我的新tree
2011-08-06 11:04 723function Node(id, pid, text, hr ... -
我的新菜单
2011-08-06 11:02 697function Menu() { this.tbarH ... -
ziliao
2011-01-28 23:54 63sadfsdf -
无缝滚动组件
2011-01-22 23:15 853<!DOCTYPE html PUBLIC " ... -
JS组件--Tree
2011-01-15 16:05 838function MyTree(cnt) { this.i ... -
图片上传预览
2011-01-01 22:02 821<html> <hea ... -
JS组件--Menu
2010-12-25 22:19 901function Menu() { this.bars = ... -
我的JS库
2010-12-18 21:24 727//Ajax扩展 var Ajax = function(u ...
相关推荐
doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现...
"Doubleselect"是一种在数据库查询优化中常见的技术,特别是在复杂的SQL查询中,它涉及到如何处理两个或更多选择(即子查询)以提高性能和效率。在这个主题中,我们将深入探讨doubleselect的概念、应用场景以及如何...
在Struts2中,`doubleselect`标签是一个非常实用的组件,用于创建级联选择列表,即两个下拉列表之间存在关联,当用户在一个下拉列表中选择一个选项时,另一个下拉列表会根据所选值动态更新其选项。这种功能在处理如...
`doubleselect`标签是Struts2提供的一个特殊标签,用于创建具有两个级联选择框的用户界面,通常用于父类别与子类别之间的关联选择,如在上述例子中的部门与人员选择。 在`doubleselect`标签中,`list`属性用于指定...
在本篇文章中,我们将深入探讨Struts2框架中的`doubleselect`标签的使用方法,并结合一个具体的示例来展示如何将此标签与Hibernate和Spring框架整合在一起,以便于更好地理解和运用这一技术。 ### Struts2框架简介 ...
### Struts2中doubleselect标签实现省市联动案例详解 #### 一、背景介绍 在Web应用开发中,经常需要处理一些具有层级关系的数据选择问题,比如中国的省市县选择。为了提高用户体验并简化开发过程,Struts2框架提供...
在Struts2中,`doubleselect`标签就是为了解决这类问题而设计的。 `doubleselect`标签是Struts2自定义标签库的一部分,它允许开发者创建两个相关的下拉列表,当用户在第一个下拉框选择一个选项时,第二个下拉框的...
Doubleselect是Struts2提供的一种实现级联选择的组件,允许用户在一个下拉框的选择影响另一个下拉框的选项。 在Struts2级联doubleselect的实现中,主要涉及以下几个关键知识点: 1. **Action类**:Action类是业务...
在Struts2中,我们有许多内置的标签来帮助开发者更方便地处理表单元素,例如`<s:select>`和`<s:doubleselect>`就是其中两个用于创建下拉列表的标签。下面我们将详细探讨这两个标签以及如何在J2EE项目中使用它们。 1...
DoubleSelect11.vue
Struts2 Doubleselect标签是用于创建二级联动下拉列表的,这种控件在网页表单中常见于需要显示层次关系数据的场景,例如省份-城市的选择。Doubleselect标签结合了两个下拉列表,其中一个的选择会影响到另一个下拉...
4. **OGNL表达式**:在JSP页面中,我们可以使用OGNL表达式来获取Action中的属性,如`<s:doubleselect>`标签中的`list`、`listKey`、`listValue`等属性,都需要通过OGNL来绑定Action中的数据。 5. **`doubleselect`...
### Struts2中的DoubleSelect标签的用法 在Struts2框架中,`doubleSelect`标签是一种非常实用的工具,它允许用户在一个页面上通过两次选择来完成复杂的数据关联操作。这种标签尤其适用于多级菜单或者层级关系的选择...
"两级级联下拉列表jquery插件doubleSelect.zip"是一个专门处理这种需求的jQuery插件,它可以帮助开发者快速实现这种功能,提升用户体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...
<s:form action="doubleSelect"> 请选择..."/> 加载子级选项"/> != null"> 请选择..."/> ``` 4. **动态加载数据**:当用户提交表单时,Struts2会调用Action中的`loadChildOptions`方法。在这个方法中,你...
在Struts2中,`doubleselect`标签是一个非常实用的功能,它允许用户在两个级联的下拉列表中进行选择,通常用于处理层级数据,如分类和子分类,或者部门和员工等关系。 在描述中提到的官方示例虽然展示了`...
然而,由于Struts1的生命周期和设计模式,直接使用`doubleselect`可能存在一些限制,例如在实时更新第二个下拉列表时的处理逻辑可能比较复杂,需要配合Action和Form Bean来完成。 实现Struts二级联动的步骤大致如下...
在本文中,我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况,例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...
2. **页面访问**:当页面包含特定标签(如 `<s:doubleselect/>`)时,建议通过Action访问页面,而不是直接通过JSP的URL访问,以确保正确渲染这些标签。 接下来,我们将详细介绍两个常见而又复杂的表单标签:`...