ajax 가 완벽 하 게 해결 한 드 롭 다운 상자 의 onchange 문제

즉,지역 드 롭 다운 상자 의 onchange 사건 을 촉발 할 때 대리상 의 드 롭 다운 상자 옵션 도 상응 한 변화 가 있 습 니 다.예 를 들 어 지역 호 남-창 사 를 선택 하면 대리상 드 롭 다운 상 자 는 장사 의 대리상 만 표시 합 니 다.원래 이것 이 잘 이 루어 진다 고 생각 했 지만 실제 적 으로 고 칠 때 문제 가 많다 는 것 을 알 게 되 었 습 니 다.주요 문 제 는 기 존의 지역 연동 이 js 로 이 루어 진 것 입 니 다.그의 데이터 소스 는 xml 파일 입 니 다.물론 드 롭 다운 상자 가 서버 엔 드 컨트롤 이 라면 문 제 는 잘 해결 되 었 습 니 다.지금 은 html 컨트롤 이 단번에 고치 기 어 려 운 것 같 습 니 다.몇 가지 방법 을 생각해 보 았 지만 실현 되 기 가 이상 적 이지 않 습 니 다.마지막 으로 ajax 로 문 제 를 해결 하 는 방향 으로 방향 을 바 꿔 야 쉽게 풀 수 있 습 니 다.지금 생각해 보면 ajax 로 만 해결 할 수 있 는 것 같 습 니 다.지역 드 롭 다운 상자 의 onchange 이벤트 에서 배경 으로 제출 하고 지역 드 롭 다운 상자 의 id 를 전달 하면 실제 발생 하 는 리 턴 은 지역 연동 드 롭 다운 상 자 를 다시 초기 화 합 니 다.지금 나 는 이 ajax 가 실현 되 는 과정 을 구체 적 으로 이야기 합 니 다.우선 페이지 는 드 롭 다운 상자 의 html 컨트롤 을 정의 해 야 합 니 다

 
<select id="Agent" name="Agent"></select> 

다음은 당연히 XmlHttpRequest 대상 을 정의 합 니 다

 
var xmlhttp; 
function CreateXmlHttp() 
{ 

// IE     XmlHttpRequest   
if(window.XmlHttpRequest) 
{ 
xmlhttp=new XmlHttpRequest(); 
} 
//IE     XmlHttpRequest   
if(window.ActiveXObject) 
{ 
try 
{ 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch(e) 
{ 
try{ 
xmlhttp=new ActiveXObject("msxml2.XMLHTTP"); 
} 
catch(ex){} 
} 
} 
} 

이것 은 나의 여러 블 로그 글 에서 논술 되 었 으 니 더 이상 말 하지 않 겠 다.다음은 당연히 이 대상 을 이용 하여 조건 을 보 내 고 데 이 터 를 얻 으 며 얻 은 데 이 터 를 에이전트 라 는 드 롭 다운 상자 에 연결 합 니 다.지역 드 롭 다운 상자 의 onchange 이벤트 에서 함수 AjaxSend()를 터치 합 니 다

 
function AjaxSend() 
{ 
//  XmlHttpRequest   
CreateXmlHttp(); 
if(!xmlhttp) 
{ 
alert("  xmlhttpRequest    ！"); 
return false; 
} 
//        value ，       
var ss=document.getElementById("a2").value.substring(0,4); 
} 
//    url，UserAjax         
url="UserAjax.aspx?area="+ss; 
xmlhttp.open("POST",url,false); 

xmlhttp.onreadystatechange=function() 
{ 
if(xmlhttp.readyState==4) 
{ 
if(xmlhttp.status==200) 
{ 
//       
document.getElementById("agent").options.length=0; 
//str         ，   "0001/   1,0002/   2,0003/   3" 
var str=xmlhttp.responseText; 
//             
var strs=str.split(","); 
document.getElementById("agent").options.add(new Option("----------","000000")); 
for(var i=0;i<strs.length-1;i++) 
{ 
//  value （  ） 
var a=strs[i].substring(0,strs[i].lastIndexOf("/")); 
//       
var b=strs[i].substring(strs[i].lastIndexOf("/")+1,strs.length); 
//       
document.getElementById("agent").options.add(new Option(b,a)); 
} 
} 
} 
} 
xmlhttp.send(); 
} 

또한 UserAjax 가 이 지역 번 호 를 받 은 후에 데 이 터 를 가 져 와 문자열 을 되 돌려 주 는 과정 도 소개 합 니 다

 
string Area = Request.QueryString["area"].ToString(); 
DataTable data = "  DataTable，         ，  " 
string aa = ""; 
for (int i = 0; i < data.Rows.Count; i++) 
{ 
if (aa == "") 
{ 
aa = data.Rows[i]["id"].ToString()+"/"+data.Rows[i]["name"].ToString(); 
} 
else 
{ 
aa = aa + "," + data.Rows[i]["id"].ToString() +"/"+ data.Rows[i]["name"].ToString(); 
} 
} 
Response.Write(aa); 

이렇게 하면 비교적 까다 로 운 문 제 는 ajax 로 완벽 하 게 해결 되 었 습 니 다.또한 배경 으로 다시 보 내 서 드 롭 다운 상자 가 초기 화 되 지 않 고 옵션 이 바 뀌 었 습 니 다.친애 하 는 친구,이 예 를 보면 ajax 에 대해 서도 더 좋 은 인식 을 가지 게 되 었 습 니까?