JavaScript control server Control instance one

Recently multiple pages need to load some drop-down list boxes for the user to choose, the original is loaded on the server side should be used. Finally, because

Business logic considerations, you need to put some of the functionality of DropDownList to the client implementation. Now the drop-down list features a sense of use

The performance is much better than putting it all on the server side.

Specific methods:

Put a DropDownList control in the page and add an item to parse the HTML code it produces, so that you can use JS to

Dynamic control, it will be very clear that its test code is as follows:

<asp:dropdownlist id= "DropDownList1" runat= "Server" >

<asp:ListItem>1</asp:ListItem>

</asp:DropDownList>

View in the browser and parse the HTML: The following is the HTML code generated by the DropDownList control. And the normal select No

There is a difference. Then you can use JS to dynamically fill, delete, select and other control.

<select name= "DropDownList1" id= "DropDownList1" >

<option value= "1" >1</option>

</select>

You can delete <asp:ListItem>1</asp:ListItem>, and now add two HTML button controls, respectively, to implement the Add option, and remove all options. Button source code is as follows:

<input id= "Button1" type= "button" value= "Add Option" onclick= "AddOption ()"/>

<input id= "Button2" type= "button" value= "Delete all option" onclick= "deloption ()"/>

The Add and remove functions are as follows:

function AddOption () {

var ddlobj = document.getElementById ("DropDownList1");//Get Object

if (ddlobj.length>0)

Deloption ();//delete all before adding

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");//Get Object

for (Var i=ddlobj.length-1;i>=0;i--) {

Ddlobj.remove (i);//firefox does not support ddlCurSelectKey.options.remove (), ie two types are supported

}

}

Viewing in the browser makes it easy to create a select drop-down option that is more efficient than the server because these are client-generated

The code for the end work. But this time if you want to use Dropdownlist1.selectedvalue to get the option that the user chooses, then you will have to

to an error. This is because DropDownList is added dynamically by JS, so its entries do not belong to viewstate and are not maintained,

That means we can't handle it on the server side. To solve this problem, you can use two ways: 1, hidden control save

User option mode, 2, Request.Form mode. (see MSDN Taste Ajax)

1, we add a hidden control in the page, use it to save the DropDownList option change information, so that in the user choice sense

Interest information, we can be on the server side to obtain information, and processing, reasonable to achieve the division between customer and service.

Add a onchange event to the DropDownList control, at which point its HTML code looks like this:

<asp:dropdownlist id= "DropDownList1" runat= "Server" onchange= "Resvitem ()" >

</asp:DropDownList>

The onchange event, which mainly holds the value selected by the user, is as follows:

function Resvitem () {

var objddl = document.getElementById ("DropDownList1");

document.getElementById ("HiddenField1"). Value = Objddl.options[objddl.selectedindex].value;

}

After this, we use a Asp:button control to test the results:

protected void Button1_Click (object sender, EventArgs e)

{

Response.Write (Hiddenfield1.value);

}

To this, all the work has been done, but there is a problem, the change event of DropDownList only when the user changes the dropdown

Item is not triggered. Therefore, when a user commits using the default option, it gets a null value. So we can fill the option with the

Hidden initialization. Add a line of code to the AddOption event as follows:

function AddOption () {

var ddlobj = document.getElementById ("DropDownList1");//Get Object

if (ddlobj.length>0)

Deloption ();//delete all before adding

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 section in the TT browser add is not successful, other browsing has not tried, the following is another way of writing:

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

}
}
}

JavaScript control server Control instance one