JavaScript Dynamic control server control instance _javascript tips

Most recent pages need to load a few Drop-down list boxes for users to choose from, the original is on the server side of the load should be used. Finally, due to business logic considerations, it is necessary to put some of the functions of DropDownList to the client implementation. Now the functionality of the Drop-down list is much better than the full server-side performance.

Specific methods:

Put a DropDownList control in the page and add an item to analyze the resulting HTML code, so that when you use JS for dynamic control, it will be very clear that the test code looks like this:

<asp:dropdownlist id= "DropDownList1" runat= "Server" >
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

View in a browser and parse HTML: The following is the HTML code generated by the DropDownList control. And the ordinary Select No

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

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

You can <asp:ListItem>1</asp:ListItem> Delete, now add two HTML button controls, respectively to implement add options, 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=" all delete 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 first, then add 

var opttext = new Array ("founder", "the", "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 support
}
}

Viewed in the browser, you can easily create a select drop-down option, which is more efficient than the server because these are client-generated

End of the work code. But this time if you want to use Dropdownlist1.selectedvalue to get the user's options, you'll have to

to an error. This is because the DropDownList is dynamically added by JS, so its items do not belong to the 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 on the page, use it to save the information of the change of DropDownList option, so that in the user's choice sense

Interest information, we can get information on the server side, and to deal with, reasonable implementation of the division between the customer and the 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 user-selected value, is as follows:

function Resvitem () {
var objddl = document.getElementById ("DropDownList1");
document.getElementById ("HiddenField1"). Value = Objddl.options[objddl.selectedindex].value;
}

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

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

So, all the work has been done, but there is one problem with the DropDownList change event only when the user changes the selection

Item is not triggered. Therefore, when the user commits with the default option, a null value is obtained. So we can populate option with the

Hidden initialized. Add one 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 first, then add 

var opttext = new Array ("founder", "the", "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 in the TT browser add unsuccessful, other browsing has not been tried, the following is another way to:

function Getdeptlist () {var ddlcitytype = document.getElementById ("Ddlcitytype"); var ddlposition = Document.getelement
Byid ("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; W

Hile (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 = do
Cument.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); }
}
}