Javascript 동적 제어 서버 제어 example_javascript 기술

최근에는 사용자가 선택할 수 있도록 일부 드롭다운 목록 상자를 로드해야 하는 페이지가 많습니다. 원래는 모두 서버 측에 로드되어 있었습니다. 마지막으로 비즈니스 논리 고려 사항으로 인해 DropDownList의 일부 기능을 클라이언트 측에서 구현해야 합니다. 이제 드롭다운 목록 기능을 서버 측에 모두 배치하는 것보다 사용하기가 훨씬 더 좋습니다.

구체적인 방법:

페이지에 DropDownList 컨트롤을 넣고 생성된 HTML 코드를 분석하는 항목을 추가합니다. 이렇게 하면 동적 컨트롤을 위해 js를 사용할 때 테스트 코드가 다음과 같이 명확해집니다.

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

브라우저에서 보고 Html을 분석합니다. 다음은 DropDownList 컨트롤에서 생성된 HTML 코드입니다. 일반 셀렉션과 다르지 않아요

차이가 있습니다. 그런 다음 js를 통해 동적으로 채우기, 삭제, 선택 및 기타 제어를 수행할 수 있습니다.

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

1을 삭제하고 이제 두 개의 HTML 버튼 컨트롤을 추가하여 각각 옵션을 추가하고 모든 옵션을 삭제할 수 있습니다. 버튼 소스코드는 다음과 같습니다.

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />

기능 추가 및 제거는 다음과 같습니다.

function 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 Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}

}

function delOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}

브라우저에서 보면 선택 드롭다운 옵션을 쉽게 만들 수 있으며 클라이언트측에서 생성되므로 서버측보다 효율적입니다.

부업용 코드입니다. 하지만 이때 DropDownList1.SelectedValue를 사용하여 사용자가 선택한 옵션을 가져오려면

오류가 발생했습니다. 이는 DropDownList가 JS에 의해 동적으로 추가되므로 해당 항목이 ViewState에 속하지 않고 유지 관리되지 않기 때문입니다.

즉, 서버 측에서 처리할 수 없다는 의미입니다. 이 문제를 해결하기 위해 두 가지 방법을 사용할 수 있습니다. 1. 숨겨진 컨트롤 저장

사용자 옵션 방식 2. Request.Form 방식. (msdn Taste of Ajax 참조)

1. 페이지에 Hidden 컨트롤을 추가하고 이를 사용하여 DropDownList 옵션 변경 사항에 대한 정보를 저장하여 사용자의 선택 감각을 높였습니다

관심 정보를 수신한 후 서버 측에서 정보를 입수하고 처리하여 고객과 서비스 간의 업무 분업을 합리적으로 실현할 수 있습니다.

DropDownList 컨트롤에 onchange 이벤트를 추가합니다. 이때 html 코드는 다음과 같습니다.

<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()">
</asp:DropDownList>

Onchange 이벤트는 주로 사용자가 선택한 값을 저장하는 이벤트입니다.

function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}

이후에는 asp:button 컨트롤을 사용하여 결과를 테스트합니다.

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

이 시점에서 모든 작업이 완료되었지만 여전히 문제가 있습니다. DropDownList의 변경 이벤트는 사용자가 드롭다운 선택을 변경할 때만 사용할 수 있습니다

을 선택한 경우에만 실행됩니다. 따라서 사용자가 기본 옵션을 사용하여 제출하면 null 값을 얻게 됩니다. 따라서 옵션, 즉

을 채울 수 있습니다.

숨겨진 초기화. 다음과 같이 addOption 이벤트에 코드 줄을 추가합니다.

function 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 Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}
document.getElementById("HiddenField1").value = optValue[0];
}

그런데 위의 빨간색 부분은 TT 브라우저에서는 ADD가 성공하지 않습니다. 다른 브라우저에서는 시도해보지 않았습니다.

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var 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("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}

}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(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("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}