Nuevamente con algunos tips para los que les gusta jugar trabajar con JavaScript y los controles web. Algo que preguntan (sea msn, por email, o en los grupos de noticias) es como leer un combo desde JavaScript (el valor o el índice) si dicho combo es un webcontrol
Cuando decimos un webcontrol DropDownList en el servidor porque trabajamos con tecnología ASP.NET, en el cliente se renderiza a popular y conocido HTML control Select.
O sea este sencillo combo (enlazado a un objeto)
<asp:DropDownList ID="ddlCategorias" runat="server" DataSourceID="objDSCategorias"
DataTextField="CategoryName" DataValueField="CategoryID">
En el cliente se renderiza en el cliente (con datos incluidos)
<select name="ctl00$Contentplaceholder1$ddlCategorias"
id="ctl00_Contentplaceholder1_ddlCategorias">
<option value="1">Beverages 1234</option>
<option value="2">Condiments 2</option>
<option value="3">Confections</option>
<option selected="selected" value="4">Dairy Products</option>
<option value="5">Grains/Cereals</option>
<option value="6">Meat/Poultry</option>
<option value="7">Produce</option>
<option value="8">Seafood</option>
</select>
Como se lee el ID en el navegador del cliente esta compuesto por una concatenación de contenedores de donde esta finalmente el webcontrol, en este caso esta dentro de un
ContentPlaceHolder, pero podría estar sucesivamente dentro de Panel u otros controles contenedores... por eso no sabemos de "antemano" cual es el ID para hacer referencia en JavaScript.
Asignar una función JavaScript. Asociar eventos clientes en controles del servidor
Deseamos ejecutar una función js cuando el en cliente se realiza un evento onChange del control.
Por ejemplo si tenemos esta función:
<script type="text/javascript" language="javascript">
function Seleccionar(combo){
var indice = combo.selectedIndex;
var valor = combo.options[combo.selectedIndex].text;
alert(indice);
alert(valor);
//Guardamos en un hidden
document.getElementById('<%=HiddenField1.ClientId%>').value = valor;
}
</script>
Que para economizar estamos enviado el objeto select en un parametro combo, entonces ya lo conocemos y no tenemos necesidad de realizar un getElementById.
En el cliente se deberia escribir asi:
<select id="ejemplo" onChange="Seleccionar(this);">
ddlCategorias.Attributes.Add("onChange", "Seleccionar(this);")
o asi:
ddlCategorias.Attributes("onChange") = "Seleccionar(this);"
Ok... ya tenemos nuestro evento en el control... y lo testeamos ;)
Un tips mas, tenemos un nuevo requerimiento:
Asignar este valor a un campo oculto
Tendríamos que obtener el control del campo oculto en javascript y lo hacemos mediante la busqueda en el documento con getElementById, pero no sabemos de antemano cual es el Id del cliente, entonces debemos escribirlo de la siguiente manera:
document.getElementById('<%=HiddenField1.ClientId%>').value = valor;
Donde hacemos uso de la propiedad .
ClientId
Enlaces