Instancia de control del servidor de control dinámico de JavaScript

Recientemente, varias páginas deben cargar algunos cuadros de lista desplegable para que los usuarios elijan. Resulta que se están cargando en el lado del servidor y deben usarse. Finalmente, debido a las consideraciones lógicas comerciales, algunas de las funciones de DropdownList deben ponerse en la implementación del cliente. Ahora las funciones de la lista desplegable se sienten mucho mejor que cuando las colocan en el lado del servidor.

Métodos específicos:

Coloque un control de lista desplegable en la página y agregue un elemento para analizar el código HTML que genera. De esta manera, cuando se usa JS para control dinámico, el código de prueba será muy claro de la siguiente manera:

 <ASP: DropDownList id = "DropDownList1" Runat = "Server"> <Asp: ListItem> 1 </Asp: ListItem> </Asp: DropDownList>

Ver en el navegador y analizar el HTML: El siguiente es el código HTML generado por el control de la lista desplegable. Nada como la selección ordinaria

Hay una diferencia. Luego puede llenar, eliminar, seleccionar y otros controles dinámicamente a través de JS.

 <Seleccione Name = "DropdownList1" Id = "DropdownList1"> <opción Valor = "1"> 1 </opción> </select>

Puede eliminar <asp: listItem> 1 </asp: listItem>, y ahora agregar dos controles de botones HTML para implementar la adición de opciones y eliminar todas las opciones respectivamente. El código fuente del botón es el siguiente:

 <input id = "button1" type = "button" value = "add option" onClick = "addoPtion ()" /> <input id = "button2" type = "button" value = "eliminar todo opción" onClick = "deloption ()" />

Agregar y eliminar funciones son las siguientes:

 function addOption () {var ddlobj = document.getElementById ("DropDownList1"); // Get Object if (ddlobj.length> 0) deloption (); // eliminar todo primero, y luego agregar var opttext = new array ("fundador", "china", "beijing"); var optvalue = new nhow 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"); // Obtener objeto para (var i = ddlobj.length-1; i> = 0; i-) {ddlobj.remove (i); // firefox no es compatible

Ver en un navegador, puede crear fácilmente opciones desplegables de selección, que son más eficientes que los servidores, ya que estos son generados por el cliente

código que funciona a un lado. Pero en este momento, si desea usar DropDownList1.SelectedValue para obtener la opción seleccionada por el usuario, entonces tendrá

Tengo un error. Esto se debe a que DropDownList es agregado dinámicamente por JS, por lo que sus elementos no pertenecen a ViewState y no se mantienen,

Es decir, no podemos manejarlo en el lado del servidor. Para resolver este problema, hay dos formas de usar: 1. Guarde el control oculto

Método de opción de usuario; 2. Método de requería. Forma. (Ver MSDN Taste Ajax)

1. Agregamos un control oculto a la página y lo usamos para guardar la información sobre los cambios en las opciones de lista desplegable, de modo que el sentido de elección del usuario

Después de tener la información de interés, podemos obtener la información del servidor y procesarla para realizar razonablemente la división del trabajo entre clientes y servicios.

Agregue un evento ONChange al control DropDownList, y su código HTML es el siguiente:

 <ASP: DropDownList id = "DropDownList1" Runat = "Server" OnChange = "ResvItem ()"> </Asp: DropDownList>

El evento Onchange es el siguiente. Este evento guarda principalmente el valor seleccionado por el usuario:

 función resvitem () {var objddl = document.getElementById ("DropDownList1"); document.getElementById ("Hiddenfield1"). Value = objddl.options [objddl.selectedIndex] .Value;}

Después de esto, usamos un control ASP: Botón para probar los resultados:

 Botón vacío protegido1_Click (remitente de objeto, EventArgs e) {Response.Write (Hiddenfield1.Value);}

En este punto, todo el trabajo se ha completado, pero todavía hay un problema. El evento de cambio de DropDownList solo se selecciona cuando el usuario cambia el menú desplegable.

Solo se activará cuando el elemento sea. Por lo tanto, cuando el usuario envía con las opciones predeterminadas, se obtiene el valor nulo. Por lo tanto, al llenar la opción, podemos

Inicialización oculta. Agregue una línea de código al evento de adición de la siguiente manera:

 function addOption () {var ddlobj = document.getElementById ("DropDownList1"); // Get Object if (ddlobj.length> 0) deloption (); // eliminar todo primero, y luego agregar var opttext = new array ("fundador", "china", "beijing"); var optvalue = new nhow 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"). Valor. optValue [0];}

Sin embargo, la parte roja anterior no tiene éxito en Add Under TT Browser, y aún no he probado otras navegaciones. Aquí hay otra forma de escribir:

 function getDeptList () {var ddlcityType = document.getElementById ("ddlcityType"); var ddlPosition = document.getElementById ("ddlPosition"); var v = ddlcityType.options [ddlcityType.selectedIndex]; // alerta (v.value); Deptlist = invitados_userregister.getDeptList (v.Value) .value; var deptlist = new array (); deTptlist = deTptList.split (';'); for (var i = 0; i <de deptlist.length; i ++) {si (deptlist [i]! = ") { Dept = deTptList [i] .split (','); var opt = document.createElement ("opción"); opt.innerhtml = dePT [1]; opt.value = deTpt [0]; ddlPosition.insertbefore (opt, ddlposition.firstchild);}}} function deloption () {var ddluserschool = document.getElementByid ("ddluserschool"); var num = ddluserschool.lInmenge; while (num> 0) {for (var j = 0; j <num; j ++) {ddluserschool.remove (j);} num = ddluserschool.length;}} función getSchoollist () {deloption (); var ddlProvince = document.getEmementByid ("ddlProvince"); var ddlusersChool = document.getElementById ("ddluserschool"); var v = ddlprovince.options [ddlProvince.selectedIndex]; var deptlist = invitado_userregister.getSchoollist (v.Value) .Value; var deptlist = new (); i = 0; i <deptlist.length; i ++) {if (deTptList [i]! = "") {var dePT = deTptList [i] .split (','); var opt = document.createElement ("opción"); opt.innerhtml = Dept [1]; opt.value = departamento [0]; ddluserschool.insertbefore (Opt, ddluserschool.firstchild);}}}}