当前位置: 代码迷 >> Web前端 >> 小弟我的doubleselect
  详细解决方案

小弟我的doubleselect

热度:65   发布时间:2012-09-20 09:36:50.0
我的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);
??????? }
?});
};