亚洲中文字幕乱码一区,久久伊人亚洲AV无码网站,亚洲国产成人久久三区

select集連+xml+選擇提交 (Ajax局部刷新)

Posted on 2007-07-02 10:22 G_G 閱讀(3060) 評論(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://m.tkk7.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°C

你是 javascript 在客戶端繪制圖表系列的作者嗎?
啊我正看你的東西你幫我大忙了謝謝

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: html css 切割圖片顯示 javascript 基礎總結（面向對象） jquery 補全使用筆記 ajax Form create div dom-drag.js 拖拽學習 javascript ajax js 拖動 ajax javascript 彈出框頁面 table 數據收集

Skynet

select集連+xml+選擇提交 (Ajax局部刷新)

評論

# re: select集連+xml+選擇提交 (Ajax局部刷新) [未登錄] 回復 更多評論

# re: select集連+xml+選擇提交 (Ajax局部刷新) 回復 更多評論

日歷

公告

常用鏈接

留言簿(13)

隨筆分類

隨筆檔案

文章檔案

相冊

hibernate

My連接

搜索

最新評論

閱讀排行榜

評論排行榜

Skynet

select集連+xml+選擇提交 (Ajax局部刷新)

評論

# re: select集連+xml+選擇提交 (Ajax局部刷新) [未登錄] 回復 更多評論

# re: select集連+xml+選擇提交 (Ajax局部刷新) 回復 更多評論

日歷

公告

常用鏈接

留言簿(13)

隨筆分類

隨筆檔案

文章檔案

相冊

hibernate

My連接

搜索

最新評論

閱讀排行榜

評論排行榜

# re: select集連+xml+選擇提交 (Ajax局部刷新) [未登錄] 回復更多評論

# re: select集連+xml+選擇提交 (Ajax局部刷新) 回復更多評論