posts - 165, comments - 198, trackbacks - 0, articles - 1
          
	
 
BlogJava ::
首頁 ::
新隨筆 ::
聯系 ::
聚合
 ::
管理


          
		          		
	
          
	
          
		
			
          
			
          
		          		
		
			
          
				
					
	
          
		
          
			
          
				 select集連+xml+選擇提交 (Ajax局部刷新) 
			
          
 			Posted on 2007-07-02 10:22 G_G 閱讀(3065) 評論(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.aygfsteel.com/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()??);
          }






          數據：

          心得：開發中不管有多緊，原則不能逾越? 重構（減少重復） 提升類，方法地位 


          
	
          
	


          
	    
    

          

          評論
          
	
			
          
				
          
					
          
						# re:  select集連+xml+選擇提交 (Ajax局部刷新) [未登錄]  回復  更多評論
						  
					
          
					2007-07-02 11:03 by -274°C
				
          
				
          不錯
          
			
          
		
			
          
				
          
					
          
						# re:  select集連+xml+選擇提交 (Ajax局部刷新)   回復  更多評論
						  
					
          
					2007-07-02 15:40 by G_G
				
          
				
          @-274&#176;C

          

          你是 javascript 在客戶端繪制圖表系列 的作者 嗎?

          啊 我正 看你的 東西  你幫我大忙了  謝謝
          
			
          
		




          








          

				
			
          
		          		
	
          
	
          
		
			


		
	
          

          


    







          
        
	




主站蜘蛛池模板：
上高县|
黑河市|
灵台县|
金塔县|
阳东县|
远安县|
略阳县|
绵竹市|
晴隆县|
枣阳市|
荥经县|
惠安县|
霍州市|
澎湖县|
健康|
西平县|
光山县|
白银市|
建水县|
三门县|
嘉黎县|
佛教|
溧阳市|
普格县|
玛曲县|
长垣县|
玉屏|
松滋市|
永顺县|
赫章县|
布拖县|
凤冈县|
南部县|
应城市|
宁阳县|
巨野县|
丰顺县|
恩施市|
昆山市|
泾源县|
汝州市|