최근에 여러 페이지가 사용자가 선택할 수 있도록 일부 드롭 다운 목록 상자를로드해야합니다. 서버 측에로드 중이며 사용해야합니다. 마지막으로, 비즈니스 로직 고려 사항으로 인해 DropdownList의 일부 기능을 클라이언트 구현에 넣어야합니다. 이제 드롭 다운 목록 기능은 서버 측에 올릴 때보 다 훨씬 나아집니다.
특정 방법 :
DropdownList 컨트롤을 페이지에 넣고 생성하는 HTML 코드를 분석하기 위해 항목을 추가하십시오. 이런 식으로 동적 제어에 JS를 사용할 때 테스트 코드는 다음과 같이 매우 명확합니다.
<asp : dropdownlist id = "dropdownlist1"runat = "server"> <asp : listitem> 1 </asp : listitem> </asp : dropdownlist>
브라우저에서보고 HTML을 분석하십시오. 다음은 DropdownList 컨트롤에서 생성 된 HTML 코드입니다. 평범한 선택과 같은 것은 없습니다
차이가 있습니다. 그런 다음 JS를 통해 동적으로 채우고 삭제, 선택 및 기타 컨트롤을 할 수 있습니다.
<name = "dropdownlist1"id = "dropdownlist1"> <옵션 값 = "1"> 1 </옵션> </select>
<asp : listitem> 1 </asp : listitem>을 삭제하고 이제 옵션 추가를 구현하고 모든 옵션을 삭제하기 위해 두 개의 HTML 버튼 컨트롤을 추가 할 수 있습니다. 버튼 소스 코드는 다음과 같습니다.
<입력 id = "button1"type = "button"value = "옵션 추가"onclick = "addoption ()" /> <입력 id = "button2"type = "button"value = "모든 옵션 삭제"onclick = "deloption ()" />
함수 추가 및 삭제는 다음과 같습니다.
함수 addOption () {var ddlobj = document.getElementById ( "dropdownlist1"); // 객체를 얻는 if (ddlobj.length> 0) deloption (); // 먼저 삭제 한 다음 var opttext = new Array ( "Founder", "China", "Beijing"); var optvalue = new 배열 ( "0", "1", "2"); var ooption = null; for (var i = 0; i <opttext.length; i ++) {oooption = new 옵션 (OptText [i], optValue [i]); ddlobj.options.add (ooption); document.getElementById ( "dropdownlist1"); // (var i = ddlobj.length-1; i> = 0; i-) {ddlobj.remove (i); // firefox는 ddlcurselectkey.options.romove ()를 지원하지 않습니다.브라우저에서 볼 때 클라이언트 생성이므로 서버보다 효율적인 선택 드롭 다운 옵션을 쉽게 만들 수 있습니다.
측면에서 작동하는 코드. 그러나 현재 DropdownList1.SelectedValue를 사용하려면 사용자가 선택한 옵션을 얻으려면
오류가 발생했습니다. DropdownList가 JS에 의해 동적으로 추가되므로 해당 항목이 ViewState에 속하지 않으며 유지 관리되지 않기 때문입니다.
즉, 우리는 서버 측에서 처리 할 수 없습니다. 이 문제를 해결하려면 사용하는 두 가지 방법이 있습니다. 1. 숨겨진 제어 저장
사용자 옵션 방법; 2. 요청. 양식 메소드. (MSDN Taste Ajax 참조)
1. 페이지에 숨겨진 컨트롤을 추가하고 사용하여 Dropdownlist 옵션의 변경 사항에 대한 정보를 저장하여 사용자의 선택 감각
관심있는 정보가 있으면 서버에 대한 정보를 얻고 고객과 서비스 간의 노동 분할을 합리적으로 실현하기 위해 처리 할 수 있습니다.
DropdownList 컨트롤에 OnChange 이벤트를 추가하면 HTML 코드가 다음과 같습니다.
<asp : dropdownlist id = "dropdownlist1"runat = "server"onchange = "resvitem ()"> </asp : dropdownlist>
Onchange 이벤트는 다음과 같습니다. 이 이벤트는 주로 사용자가 선택한 값을 저장합니다.
함수 resvitem () {var objddl = document.getElementById ( "dropdownlist1"); document.getElementById ( "hiddenfield1").그런 다음 ASP : 버튼 컨트롤을 사용하여 결과를 테스트합니다.
보호 된 void button1_click (객체 발신자, EventArgs e) {response.write (hiddenfield1.value);}이 시점에서 모든 작업이 완료되었지만 여전히 문제가 있습니다. 드롭 다운 목록의 변경 이벤트는 사용자가 드롭 다운을 변경할 때만 선택됩니다.
항목이있을 때만 트리거됩니다. 따라서 사용자가 기본 옵션을 제출하면 널 값이 얻어집니다. 따라서 옵션을 채우면 가능합니다
숨겨진 초기화. 다음과 같이 AddOption 이벤트에 코드 줄을 추가하십시오.
함수 addOption () {var ddlobj = document.getElementById ( "dropdownlist1"); // 객체를 얻는 if (ddlobj.length> 0) deloption (); // 먼저 삭제 한 다음 var opttext = new Array ( "Founder", "China", "Beijing"); var optvalue = new Array ( "0", "1", "2"); var ooption = null; for (var i = 0; i <opttext.length; i ++) {Ooption = new 옵션 (Opttext [i], optValue [i]); ddlobj.options.add (ooption); OptValue [0];}그러나 위의 빨간색 부분은 TT 브라우저에서 추가에 성공하지 못했으며 아직 다른 브라우징을 시도하지 않았습니다. 다음은 다른 글쓰기 방법입니다.
function getDeptList () {var ddlCityType = docum deptList = guest_userRegister.getDeptList (v.Value) .Value; var deptList = new Array (); deptList = deptList.split ( ';'); for (var i = 0; i <deptlist.length; i ++) {if (deptlist [i]! = ""{var Dept = deptList [i] .split ( ','); var opt = document.createElement ( "옵션"); opt.innerhtml = dept [1]; opt.value = dept [0]; ddlposition.insertbefore (opt, ddlposition.firstchild);}}} 함수 deloption () {var ddlusschool = document.getElementById ( "ddluserSchool"); while (num> 0) {for (var j = 0; j <num; j ++) {ddluserschool.remove (j);} num = ddluserschool.length;}} function getSchoollist () {deloption (); var ddlprovince = document.getlementbyid ( "ddlprov voct"; document.getElementById ( "ddluserschool"); var v = ddlprovince.options [ddlprovince.selectedIndex]; var deptlist = guest_userregister.getschoollist (v.value) .Value; var deptlist = new array (); deptlist = deptlist.spl ( '); i = 0; i <deptlist.length; i ++) {if (deptlist [i]! = "") {var dept = deptlist [i] .split ( ','); var opt = document.createelement ( "옵션"); opt.innerhtml = dept [1]; opt.value = dept [0]; ddluserschool.insertbefore (opt, ddluserschool.firstchild);}}}}