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

Posted on 2007-07-02 10:22 G_G 阅读(1836) 评论(2) 编辑收藏所属分类: javascript

问题： 下拉框的集连问题，和下拉框的选择提交
解决：用 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()  );
}

数据：