`

我的doubleselect

 
阅读更多

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);
        }
 });
};

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    doubleselect实现

    doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现doubleselect实现...

    doubleselect.

    "Doubleselect"是一种在数据库查询优化中常见的技术,特别是在复杂的SQL查询中,它涉及到如何处理两个或更多选择(即子查询)以提高性能和效率。在这个主题中,我们将深入探讨doubleselect的概念、应用场景以及如何...

    struts2 doubleselect标签的用法例子

    在Struts2中,`doubleselect`标签是一个非常实用的组件,用于创建级联选择列表,即两个下拉列表之间存在关联,当用户在一个下拉列表中选择一个选项时,另一个下拉列表会根据所选值动态更新其选项。这种功能在处理如...

    struts2 标签 doubleselect动态 用法

    `doubleselect`标签是Struts2提供的一个特殊标签,用于创建具有两个级联选择框的用户界面,通常用于父类别与子类别之间的关联选择,如在上述例子中的部门与人员选择。 在`doubleselect`标签中,`list`属性用于指定...

    struts2中doubleselect标签的应用

    在本篇文章中,我们将深入探讨Struts2框架中的`doubleselect`标签的使用方法,并结合一个具体的示例来展示如何将此标签与Hibernate和Spring框架整合在一起,以便于更好地理解和运用这一技术。 ### Struts2框架简介 ...

    doubleselect.doc

    ### Struts2中doubleselect标签实现省市联动案例详解 #### 一、背景介绍 在Web应用开发中,经常需要处理一些具有层级关系的数据选择问题,比如中国的省市县选择。为了提高用户体验并简化开发过程,Struts2框架提供...

    struts2地市、县区二级联动下拉菜单 doubleselect标签

    在Struts2中,`doubleselect`标签就是为了解决这类问题而设计的。 `doubleselect`标签是Struts2自定义标签库的一部分,它允许开发者创建两个相关的下拉列表,当用户在第一个下拉框选择一个选项时,第二个下拉框的...

    Struts2级联doubleselect

    Doubleselect是Struts2提供的一种实现级联选择的组件,允许用户在一个下拉框的选择影响另一个下拉框的选项。 在Struts2级联doubleselect的实现中,主要涉及以下几个关键知识点: 1. **Action类**:Action类是业务...

    j2ee-struts2-Select_DoubleSelect.rar_struts2 doubleselect

    在Struts2中,我们有许多内置的标签来帮助开发者更方便地处理表单元素,例如`&lt;s:select&gt;`和`&lt;s:doubleselect&gt;`就是其中两个用于创建下拉列表的标签。下面我们将详细探讨这两个标签以及如何在J2EE项目中使用它们。 1...

    DoubleSelect11.vue

    DoubleSelect11.vue

    struts2 doubleselect 实例

    Struts2 Doubleselect标签是用于创建二级联动下拉列表的,这种控件在网页表单中常见于需要显示层次关系数据的场景,例如省份-城市的选择。Doubleselect标签结合了两个下拉列表,其中一个的选择会影响到另一个下拉...

    Struts2的doubleselect标签演示

    4. **OGNL表达式**:在JSP页面中,我们可以使用OGNL表达式来获取Action中的属性,如`&lt;s:doubleselect&gt;`标签中的`list`、`listKey`、`listValue`等属性,都需要通过OGNL来绑定Action中的数据。 5. **`doubleselect`...

    struts2中的doubleSelect标签的用法(从数据库中读取数据,HSS)

    ### Struts2中的DoubleSelect标签的用法 在Struts2框架中,`doubleSelect`标签是一种非常实用的工具,它允许用户在一个页面上通过两次选择来完成复杂的数据关联操作。这种标签尤其适用于多级菜单或者层级关系的选择...

    两级级联下拉列表jquery插件doubleSelect.zip

    "两级级联下拉列表jquery插件doubleSelect.zip"是一个专门处理这种需求的jQuery插件,它可以帮助开发者快速实现这种功能,提升用户体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...

    Struts2-Double-Select-Example

    &lt;s:form action="doubleSelect"&gt; 请选择..."/&gt; 加载子级选项"/&gt; != null"&gt; 请选择..."/&gt; ``` 4. **动态加载数据**:当用户提交表单时,Struts2会调用Action中的`loadChildOptions`方法。在这个方法中,你...

    struts的三级级联

    在Struts2中,`doubleselect`标签是一个非常实用的功能,它允许用户在两个级联的下拉列表中进行选择,通常用于处理层级数据,如分类和子分类,或者部门和员工等关系。 在描述中提到的官方示例虽然展示了`...

    struts二级联动

    然而,由于Struts1的生命周期和设计模式,直接使用`doubleselect`可能存在一些限制,例如在实时更新第二个下拉列表时的处理逻辑可能比较复杂,需要配合Action和Form Bean来完成。 实现Struts二级联动的步骤大致如下...

    extjs+struts2省市区三级联动完整示例

    在本文中,我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况,例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...

    Strus 2的新表单标志的使用

    2. **页面访问**:当页面包含特定标签(如 `&lt;s:doubleselect/&gt;`)时,建议通过Action访问页面,而不是直接通过JSP的URL访问,以确保正确渲染这些标签。 接下来,我们将详细介绍两个常见而又复杂的表单标签:`...

Global site tag (gtag.js) - Google Analytics