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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值