Javascript dynamic control server control example_javascript skills

Recently, many pages need to load some drop-down list boxes for users to choose. Originally, they were all loaded on the server side. Finally, due to business logic considerations, some functions of DropDownList need to be implemented on the client side. Now the drop-down list function feels much better to use than putting it all on the server side.

Specific method:

Put a DropDownList control in the page and add an item to analyze the HTML code it generates. This way, when using js for dynamic control, it will be very clear. The test code is as follows:

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

View in the browser and analyze the Html: The following is the HTML code generated by the DropDownList control. It’s not the same as the normal selection

There is a difference. Then you can dynamically fill, delete, select and other controls through js.

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

You can delete 1 and now add two HTML button controls to add options and delete all options respectively. Button source code is as follows:

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

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

Adding and removing functions looks like this:

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两种均支持
}
}

Viewed in a browser, you can easily create select drop-down options, and since these are client-side generated, they are more efficient than server-side

Code for side work. But at this time, if you want to use DropDownList1.SelectedValue to get the options selected by the user, then you will have to

An error occurred. This is because the DropDownList is dynamically added by JS, therefore, its items do not belong to ViewState and are not maintained,

That means we can't handle it on the server side. In order to solve this problem, two methods can be used: 1. Hidden control saving

User option method; 2. Request.Form method. (See msdn Taste of Ajax)

1. We add a Hidden control to the page and use it to save the information about the DropDownList option changes, so that the user’s sense of selection

After receiving the information of interest, we can obtain the information on the server side and process it to reasonably realize the division of labor between customers and service.

Add an onchange event to the DropDownList control. At this time, its html code is as follows:

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

The

Onchange event is as follows. This event mainly saves the value selected by the user:

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

After this, we use an asp:button control to test the results:

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

At this point, all the work has been completed, but there is still a problem. The change event of DropDownList can only be used when the user changes the drop-down selection

It will only be triggered when

is selected. Therefore, when the user submits with the default options, they get a null value. So we can fill in the option, that is,

hidden initialization. Add a line of code to the addOption event as follows:

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];
}

However, the above red part is not successful in ADD under TT browser. I haven’t tried it in other browsers. Here is another way to write it:

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);
}
}
}