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">
<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>
En el cliente se deberia escribir asi:
<select id="ejemplo" onChange="Seleccionar(this);">
ddlCategorias.Attributes.Add("onChange", "Seleccionar(this);")
ddlCategorias.Attributes("onChange") = "Seleccionar(this);"
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;
Enlaces
- onchange Event
http://msdn2.microsoft.com/en-us/library/ms536912.aspx - CÓMO PARA: Asocia eventos de cliente a controles de servidor en ASP.NET utilizando Visual Basic .NET
http://support.microsoft.com/kb/318814/es - WebControl.Attributes (Propiedad)
Gets the collection of arbitrary attributes (for rendering only) that do not correspond to properties on the control.http://msdn2.microsoft.com/es-es/library/system.web.ui.webcontrols.webcontrol.attributes.aspx
- Control.ClientID (Propiedad)
Obtiene el identificador del control de servidor generado por ASP.NET.http://msdn2.microsoft.com/es-es/library/system.web.ui.control.clientid(VS.80).aspx
Estupendo artículo. Thanks!
Me sirvió mucho este artículo pues solucionó una búsqueda que estaba realizando sobre este tema.
Saludos desde Buenos Aires.
Victor
Hola
codigo muy bueno..
como prodria cargar dos combos enlazados desde una BD, y poder capturar sus valores para bajarlos a la BD, pero manejarlos con una función JavaScript para evitar el postback, ej. selecionar Pais y el otro combo capitales
muy pero muy agradecido
Erick
Te recomendaría que le des una mirada a ASP.NET AJAX Control Toolkit
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
esto es lo mejor
Excelente, me sirvióp muchísimo, ya que por alguna razón que no comprendo el codebehind de una página no me estaba recibiendo bien lo seleccionado en un DropDownList.
Muchas Gracias.
como obtener un valor de un combobos en html y guardarla en una variable en php
@Juan
Un combo HTML (un control HTML select) puedes obtener el valor y luego?
como lo quieres enviar a tu pagina PHP? hacer una llama asincrona? encapusarlo en un control hidden?
hola solo quiero comentarles q por favor q tengan el ejemplo completo a lo q me refiero es q tengo la opcion de una liga para ver la aplicion funcionando correctamente
solo es eso
saludos.
Muy buen ejemplo me sirvio bastante, y ademas aprendi como obtener las propiedades de un control desde java script gracias.
Saludos… Muy buen ejemplo me fue de mucha ayuda, pero tengo una duda si cargo el combobox dinamicamente y la tabla empleada tiene 3 campos (id, descripcion y abreviatura) al momento de cargar el combo necesito que por valor pase el id, por la etiqueta pase la descripcion pero necesito q al momento de seleccionar un elemnto del combo se imprima la abreviatura en un textbox ¿Como puedo hacer eso?
Muchas gracias
@Fredy
Podrias con dos opciones:
OPCION 1: Que el valor sea algo asi valor1#valor2 y luego al recuperarlo «parsearlo» (muy ortodoxo no?? mm)
OPCION 2: Podrias agregar un atributo mas al momento de generar los items sea algo asiY luego tratar de recuperarlo
NOTA: Voy a tratar de hacer un ejemplo y los dejo por aqui en el comentario y tambien como continuacion del articulo.
Si no lo hago en los proximos 4 dias (recuerdamelo por otro comentario)
Gracias!
No es lo que necesitaba exclusivamente, pero me sirvio para aplicarlo en JavaScript y Php…
Saludos desde Py!
@pamda
Me alegro que te sirviera para tu proyecto…
muy bueno el aporte graciassssssss
me sacaste de un gran apuro… soy nuevo programando y aportes como estos, me han salvado de varios aprietos…