[Ajax] xmlhttp를 이용한 동적 셀렉트박스

준비물: 셀렉트박스 2개..

예시: 셀렉트박스1을 클릭했을때 xmlhttp를 이용하여 db에서 Option값을 가져와서 셀렉트박스2의 옵션값에 추가시킨다.

test.asp//////////////////////////////////////////

'셀렉트박스1
<select id="sel_type1" onChange="fn_data_change(document.frm_sel);">
<option>선택해주세요</option>
<%

'셀렉트박스1은 직접 DB에서 가져온다..
mem_sql="select top 10 idx, ust_name from member order by idx desc "

set mem_rs=dbconn.execute(mem_sql)

do until mem_rs.eof
idx=mem_rs("idx")
ust_name=mem_rs("ust_name")
%>
<option value="<%=idx%>"><%=ust_name%></option>
<%
mem_rs.movenext
loop

mem_rs.close
set mem_rs=nothing
%>
</select>

'셀렉트박스2
<select id="sel_type2">
<option>선택해주세요</option>
</select>
</form>

<SCRIPT LANGUAGE="JavaScript">
<!--
function fn_data_change(obj) {
var row_num=obj.sel_type2.length-1; //기본(선택해주세요)는 제외하고 계산

//셀레트박스1에서 다시 선택했을 경우..셀렉트박스2의 기존 옵션값들은 삭제한다.

if (row_num != 0) {
var x=document.getElementById("sel_type2")
for (var k=1;k<=row_num;k++) {

//이부분 때문에 시간이 많이 걸렸다..

//처음에는 x.remove(k)로 처리했는데..계속 값이 삭제되지 않고 남아있는 것이었다.

//왜 그러지 왜 그러지 하면서..값을 계속 확인해보면서.. 1시간 정도는 헤맸다..-_-;;

//결론은 첫번째 값을 삭제하면 그 뒤의 값은 하나씩 땡겨지므로..

// 1만 적으면 되는거였다. orz

   //x.remove(option순서);
    x.remove(1);
   }
  }

var sel_value=obj.sel_type1[obj.sel_type1.selectedIndex].value;

var oXMLHTTP=new ActiveXObject("Microsoft.XMLHTTP")
var sUrl="xhp_test.asp?sel_value="+sel_value;

oXMLHTTP.open("GET", sUrl, false);
oXMLHTTP.send();

inner_value=oXMLHTTP.responseText.split(";");

  for (var i=0;i<inner_value.length;i++) {
   var obj_node=document.createElement("option"); //option 객체를 생성
   document.frm_sel.sel_type2.appendChild(obj_node);

   option_value=inner_value[i].split("/"); //텍스트와 값 구분

obj_node.innerText=option_value[0];
obj_node.value=option_value[1];

}
}

//-->
</SCRIPT>
</body>
</html>

xhp_test.asp///////////////////////////////

<%
sel_value=request("sel_value")

'원래는 db로 처리를 해야겠죠..

'옵션텍스트/옵션값 으로 구성

Response.Write "Option2/2;Option3/3;Option4/4"

%>

홈페이지제작 홈페이지제작문의 회사홈페이지제작 쇼핑몰제작 쇼핑몰구축 폐쇄몰 복지몰 몰인몰 효과음 pop시스템 pos시스템 mes crm erp erp컨설턴트 scm me2day 물류프로그램 서버구입 홈페이지빌더 효과음 복지몰 erp프로그램 파워빌더 erp컨설턴트 일본구매대행 부동산119 제로옥션 동영상강의제작 홈페이지계약서 홈페이지제작추천 salesforceautomation 그룹웨어 아이템거래 아이템거래사이트 구직사이트 웹호스팅 웹호스팅비용 바코드시스템 온라인마케팅 IT컨설팅 웹에이전시 ToT 홈페이지제작 홈페이지제작문의 회사홈페이지제작 쇼핑몰제작 쇼핑몰구축 폐쇄몰 복지몰 몰인몰 효과음 pop시스템 pos시스템 mes crm erp erp컨설턴트 scm me2day 물류프로그램 서버구입 홈페이지빌더 효과음 복지몰 erp프로그램 파워빌더 erp컨설턴트 일본구매대행 부동산119 제로옥션 동영상강의제작 홈페이지계약서 홈페이지제작추천 salesforceautomation 그룹웨어 아이템거래 아이템거래사이트 구직사이트 웹호스팅 웹호스팅비용 바코드시스템 온라인마케팅 IT컨설팅 웹에이전시 ToTb
홈페이지제작 홈페이지제작문의 회사홈페이지제작 쇼핑몰제작 쇼핑몰구축 폐쇄몰 복지몰 몰인몰 효과음 pop시스템 pos시스템 mes crm erp erp컨설턴트 scm me2day 물류프로그램 서버구입 홈페이지빌더 효과음 복지몰 erp프로그램 파워빌더 erp컨설턴트 일본구매대행 부동산119 제로옥션 동영상강의제작 홈페이지계약서 홈페이지제작추천 salesforceautomation 그룹웨어 아이템거래 아이템거래사이트 구직사이트 웹호스팅 웹호스팅비용 바코드시스템 온라인마케팅 IT컨설팅 웹에이전시 ToTb

저작자표시 비영리 동일조건

'Website 세상 > Web Program' 카테고리의 다른 글

asp utf-8 파일 읽기/쓰기 (0)	2009.11.23
[JavaScript] 인쇄를 해보자 (0)	2009.11.23
asp 에서 오라클 연결 (0)	2009.11.23
HTML DOM Table Object (0)	2009.11.23
[AJAX] XMLHTTP를 이용한 글목록,보기(?) (0)	2009.11.23
lytebox ie8 관련 (0)	2009.11.23
[JavaScript] 팝업 띄울때 줌효과 나타내기 (0)	2009.11.23
[JavaScript] 이미지 크기에 맞게 팝업창 띄우기 (0)	2009.11.23
[JavaScript] 특정영역인쇄 (0)	2009.01.15
FileSystemObject (FSO) 를 이용한 프로그래밍 (0)	2009.01.07