select集连+xml+选择提交 (Ajax局部刷新)

1 <rows><row id='1703' name='武昌南机务段    ' /><row id='1701' name='襄樊北机务段    ' /><row id='020701' name='沈阳运用车间' /><row id='1144' name='内江供电段    ' /><row id='0101' name='哈尔滨机务段    ' /><row id='0172' name='齐齐哈尔水电段    ' /><row id='1471' name='乌鲁木齐水电段    ' /><row id='1644' name='茶坞供电段    ' /><row id='1601' name='太原机务段    ' /><row id='00' name='铁道部' /><row id='0301' name='北京机务段    ' /><row id='0171' name='哈尔滨水电段    ' /><row id='0601' name='济南机务段    ' /><row id='0346' name='邯郸供电段    ' /><row id='1141' name='成都供电段    ' /><row id='1041' name='南宁供电段    ' /><row id='1473' name='库尔勒水电段    ' /><row id='1142' name='西昌供电段    ' /><row id='1603' name='侯马北机务段    ' /><row id='1143' name='重庆供电段    ' /><row id='0102' name='三棵树机务段    ' /><row id='0744' name='合肥供电段    ' /><row id='1003' name='南宁机务段    ' /><row id='1104' name='重庆南机务段    ' /><row id='0801' name='南昌机务段    ' /><row id='1474' name='奎屯水电段    ' /><row id='0707' name='南京东机务段    ' /><row id='030201' name='车间tt' /><row id='0504' name='洛阳机务段    ' /><row id='1641' name='太原供电段    ' /><row id='0802' name='向塘机务段    ' /><row id='1241' name='昆明供电段    ' /><row id='0341' name='北京西供电段    ' /><row id='0205' name='苏家屯机务段    ' /><row id='1642' name='候马北供电段    ' /><row id='0207' name='沈阳机务段    ' /><row id='0174' name='佳木斯水电段    ' /><row id='0602' name='济南西机务段    ' /><row id='1145' name='贵阳供电段    ' /><row id='0841' name='福州供电段    ' /><row id='13' name='兰州铁路局' /><row id='0302' name='丰台机务段    ' /><row id='1341' name='兰州供电段    ' /><row id='0344' name='丰台供电段    ' /><row id='0609' name='徐州北机务段    ' /><row id='0741' name='杭州供电段    ' /><row id='1342' name='武威供电段    ' /><row id='0702' name='合肥机务段    ' /><row id='1602' name='太原北机务段    ' /><row id='17' name='武汉铁路局' /><row id='14' name='乌鲁木齐铁路局' /><row id='0471' name='呼和水电段    ' /><row id='1704' name='江岸机务段    ' /><row id='0215' name='锦州机务段    ' /><row id='1107' name='贵阳机务段    ' /><row id='16' name='太原铁路局' /><row id='0271' name='沈阳水电段    ' /><row id='15' name='青藏铁路公司' /><row id='0113' name='齐齐哈尔机务段    ' /><row id='0711' name='杭州机务段    ' /><row id='1741' name='襄樊供电段    ' /><row id='030803' name='3' /><row id='0643' name='徐州供电段    ' /><row id='1605' name='湖东机务段    ' /><row id='1742' name='汉口供电段    ' /><row id='020702' name='山海关运用车间' /><row id='1472' name='哈密水电段    ' /><row id='0302u9' name='u8' /><row id='1201' name='昆明机务段    ' /><row id='0342' name='天津供电段    ' /><row id='04' name='呼和浩特铁路局' /><row id='0710' name='上海机务段    ' /><row id='0942' name='长沙供电段    ' /><row id='0401' name='包头西机务段    ' /><row id='0805' name='福州机务段    ' /><row id='0941' name='广州供电段    ' /><row id='1802' name='新丰镇机务段    ' /><row id='0273' name='锦州水电段    ' /><row id='0224' name='吉林机务段    ' /><row id='07' name='上海铁路局' /><row id='1803' name='西安机务段    ' /><row id='0272' name='长春水电段    ' /><row id='030802' name='ts车间2' /><row id='0308' name='唐山机务段    ' /><row id='0241' name='沈阳供电段    ' /><row id='0503' name='新乡机务段    ' /><row id='06' name='济南铁路局' /><row id='0345' name='丰润供电段    ' /><row id='05' name='郑州铁路局' /><row id='0306' name='怀柔北机务段    ' /><row id='0274' name='大连水电段    ' /><row id='0642' name='青岛供电段    ' /><row id='08' name='南昌铁路局' /><row id='1401' name='乌鲁木齐机务段    ' /><row id='0542' name='新乡供电段    ' /><row id='1843' name='宝鸡供电段    ' /><row id='0343' name='石家庄供电段    ' /><row id='18' name='西安铁路局' /><row id='1743' name='信阳供电段    ' /><row id='1109' name='六盘水机务段    ' /><row id='1844' name='汉中供电段    ' /><row id='0275' name='通辽水电段    ' /><row id='0501' name='郑州机务段    ' /><row id='1804' name='安康机务段    ' /><row id='0276' name='吉林水电段    ' /><row id='1501' name='西宁机务段    ' /><row id='0704' name='阜阳机务段    ' /><row id='0220' name='通辽机务段    ' /><row id='1842' name='安康供电段    ' /><row id='01' name='哈尔滨铁路局' /><row id='0317' name='石家庄电力机务段' /><row id='0943' name='衡阳供电段    ' /><row id='1102' name='成都机务段    ' /><row id='1146' name='凯里供电段    ' /><row id='1303' name='嘉峪关机务段    ' /><row id='1302' name='兰州西机务段    ' /><row id='1841' name='西安供电段    ' /><row id='0743' name='上海供电段    ' /><row id='030806' name='6' /><row id='0404' name='集宁机务段    ' /><row id='0173' name='牡丹江水电段    ' /><row id='0541' name='郑州供电段    ' /><row id='11' name='成都铁路局' /><row id='12' name='昆明铁路局' /><row id='0277' name='梅河口水电段    ' /><row id='1402' name='库尔勒机务段    ' /><row id='02' name='沈阳铁路局' /><row id='0742' name='南京供电段    ' /><row id='1304' name='迎水桥机务段    ' /><row id='0543' name='洛阳供电段    ' /><row id='0901' name='广州机务段    ' /><row id='1203' name='开远机务段    ' /><row id='1343' name='银川供电段    ' /><row id='0175' name='海拉尔水电段    ' /><row id='0944' name='怀化供电段    ' /><row id='0641' name='济南供电段    ' /><row id='03' name='北京铁路局' /><row id='0902' name='怀化机务段    ' /><row id='10' name='柳州铁路局' /><row id='030801' name='ts车间1' /><row id='1643' name='大同供电段    ' /><row id='0108' name='牡丹江机务段    ' /><row id='09' name='广州铁路公司' /><row id='1071' name='柳州水电段    ' /><row id='1571' name='西宁水电段    ' /><row id='1001' name='柳州机务段    ' /><row id='0903' name='株洲机务段    ' /></rows>
2
3 问题： 下拉框的集连问题，和下拉框的选择提交
解决：用 Ajax 的异步得到全数据（xml），再由xmlDoc解读放与下拉框。
      提交还用 <select>但加属性 ‘multiple’成多选框并用 ondblclick事件双击去选择
          eg: ondblclick= var dj = document.getElementById(select ) ;
                         var sii = dj.selectedIndex
                         if(sii>-1
                       dj.remove( sii );
项目下载：http://www.blogjava.net/Files/Good-Game/rlzyPro.rar
代码解读：

< html >
     < head >
         < SCRIPT language ="Javascript" src ="../lib/prototype1.5.0_rc1/prototype.js" ></ SCRIPT >
         < script language ="JavaScript" src ="../js/rlzy.js" ></ script >
         < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
     </ head >
     < div id ="div1" style ="background-color:#AABBFF;width:300px;height=300px" />
     < body   onload ="load()" >     //加载时候由 id 完成各个动作,init等
     < table >
         < tr >
             < td >
                 < select id ="ju" > //html 的想法是写好 id 占位置就完成任务
                     < option value ="" > --局选择-- </ option >
                 </ select >
             </ td >
             < td />< td />
         </ tr >
         < tr >
             < td />
             < td >
                 < input type ="button" id ="butn1" value ='          ' />
             </ td >
             < td >
                 < select id ="selduju" />
             </ td >
         </ tr >
         < tr >
             < td >
                 < select id ="du" >
                     < option value ="" > --段选择-- </ option >
                 </ select >
             </ td >
             < td />< td />
         < tr >
     </ table >


     < input   type ='button'   onclick ="test()" value =" test " /> //提交后就得到一个选择的value数组
                                                             //想干什么就不多提了
     </ body >
</ html >

rlzy.js 解读：
在开发的时候用 $() 在ie中有莫名其妙的问题 select 被选择多次后不见了 :（

/* *
* @author liukaiyi
*/
var domx = null ;
var sel1 = 'ju'
var sel2 = 'du'
var butn1 = 'butn1'
var selduju = 'selduju';
var url =   '.. / xml / doxml.xml'

var rowName = 'row';
var key = 'id';
var vname = 'name';

var selkey ;
var selvalue;
// 异步得到数据
function load(){
     new Ajax.Request(
        url,
        {
            method: 'get',
            onComplete: action
        });
}
function action(req){
    domx =   req.responseXML
    init();
    setSelectju();
    document.getElementById(sel2).onchange = function (){
            butSele(document.getElementById(sel2));
    }
    document.getElementById(butn1).onclick = function (){
        butClick();
    }
}

// ///////////////////////////////////////////////////////////////////////
//                                 页面建设                            ///
// ///////////////////////////////////////////////////////////////////////
// 页面 init
function init(){
    document.getElementById(selduju).style.height = 200 ;
    document.getElementById(selduju).style.width = 100 ;
    document.getElementById(selduju).setAttribute('multiple',' false ');
    document.getElementById(selduju).ondblclick = function (){
        juduondblclick();
    }

     var domse1 = document.getElementById(sel1)
     var arr = SearchSize2(domx,rowName,key);
     for ( var i = 0 ;i < arr.length;i ++ ){
         var opt = document.createElement('option');
         var text = document.createTextNode( arr[i].getAttribute(vname)  );
         opt.appendChild(text);
        opt.setAttribute( " value " ,arr[i].getAttribute(key) );
        domse1.appendChild(opt);
    }



}
// 局选择的 select  添加 onchang 事件
function setSelectju(){
     var domse1 = document.getElementById(sel1)
    domse1.onchange = function (){
        butSele(domse1);
         var id = domse1.value ;
         var seldu = document.getElementById(sel2);
         var num = seldu.getElementsByTagName('option').length - 1 ;

         for ( var i = num; i > 0 ; i -- )
            seldu.remove( 1 );

         var arr = SearchPermanganic(domx,rowName,key,id);

         for ( var i = 0 ;i < arr.length;i ++ ){
             var opt = document.createElement('option');
             var text = document.createTextNode( arr[i].getAttribute(vname)  );
             opt.appendChild(text);
            opt.setAttribute( " value " ,arr[i].getAttribute(key) );
            seldu.appendChild(opt);
        }

    }

}
// 提示是什么选择
function butSele(dom){
     var va = dom.options[dom.selectedIndex ].firstChild.nodeValue ;
     var skey = dom.options[ dom.selectedIndex ].value
     var but = document.getElementById(butn1)

     if (skey != null || skey != "" ){
        but.setAttribute( " bkey " ,skey);
        but.setAttribute( " bvalue " ,va);
        but.value = "     " + va + " >>> "
    }
     if (skey == null || skey == "" ){
         if (dom == document.getElementById(sel2) ){
             if ( document.getElementById(sel1).options[dom.selectedIndex ].value == null   ){
                but.value = "          "
                but.setAttribute( " bkey " , "" );
                but.setAttribute( " bvalue " , "" );
            } else {
                but.value =    "     " + document.getElementById(sel1).options[document.getElementById(sel1).selectedIndex ].firstChild.nodeValue ; + " >>> "
                domju = document.getElementById(sel1);
                but.setAttribute( " bkey " , domju.options[ domju.selectedIndex ].value );
                but.setAttribute( " bvalue " ,domju.options[domju.selectedIndex ].firstChild.nodeValue );
            }
        } else if (dom == document.getElementById(sel1) ){
            but.value = "          "
            but.setAttribute( " bkey " , "" );
            but.setAttribute( " bvalue " , "" );
        }
    }
}
// but onClick 事件
function butClick(){
     var bb = document.getElementById(butn1)
     var judu = document.getElementById(selduju)
     var key = bb.getAttribute( " bkey " ) ;

     if ( key != null && key != "" ){
         var opts = judu.options;
         if (opts != null ||   opts.length >= 0 )
         for ( var i = 0 ;i < opts.length;i ++ ){
             if ( opts[i].value == key ) return false ;
        }

         var opt = document.createElement('option');
         var text = document.createTextNode( bb.getAttribute( " bvalue " )  );
         opt.appendChild(text);
        opt.setAttribute( " value " ,key );
        judu.appendChild(opt);
    }
}
// selduju去除选项
function juduondblclick(){
     var dj = document.getElementById(selduju) ;
     var sii =   dj.selectedIndex
     if (sii >- 1 )
    dj.remove(  sii  );
}

// 给出选择
function getSelectAll(){
     var arr = new Array();
     var dj = document.getElementById(selduju) ;
     var opts = dj.options;

     for ( var i = 0 ;i < opts.length;i ++ ){
        arr[i] = opts[i].value;
    }
     return arr ;
}

// ///////////////////////////////////////////////////////////////////////
//                                 工具                                      ///
// ///////////////////////////////////////////////////////////////////////
// 精确给出 Node
function getNode(dom,name,attr,attrValue){
     var list = dom.getElementsByTagName(name) ;

     if ( attr == null   ) return list.item(i);

     for ( var i = 0 ; i < list.length;i ++ ){
         if ( list.item(i).getAttribute(attr) == attrValue ){
             return list.item(i);
        }
    }

}
// 模糊查找 id 包含关系
function SearchPermanganic(dom,name,attr,idp){
     var arr = new Array();
     if (idp == null || idp == "" ) return arr;

     var list = dom.getElementsByTagName(name) ;
     var j = 0 ;
     for ( var i = 0 ; i < list.length;i ++ ){
         var id =   list.item(i).getAttribute(attr) ;
         if ( id.indexOf( idp ) == 0 && id != idp){
            arr[j ++ ] = list.item(i);
        }
    }
     return arr ;
}
// 模糊查找 id 为 2 位的
function SearchSize2(dom2,name2,attr){
     var arr = new Array();

     var list = dom2.getElementsByTagName(name2) ;
     var j = 0 ;
     for ( var i = 0 ; i < list.length;i ++ ){
         var id =   list.item(i).getAttribute(attr) ;
         if ( id.length == 2   ){
            arr[j ++ ] = list.item(i);
        }
    }
     return arr ;
}

// ///////////////////////////////////////////////////////////////////////
//                                 test                                 ///
// ///////////////////////////////////////////////////////////////////////

function test(){
    window.alert( getSelectAll()  );
}

数据：

心得：开发中不管有多紧，原则不能逾越重构（减少重复）提升类，方法地位

select集连+xml+选择提交 (Ajax局部刷新)

你可能感兴趣的:(select集连+xml+选择提交 (Ajax局部刷新))