Obtener con JavaScript el valor seleccionado en un webcontrol DropDownList.

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);">
 
Como logramos esto desde el codebehind?

Debemos escribir un atributo en el webcontrol
ddlCategorias.Attributes.Add("onChange", "Seleccionar(this);")
o asi:
ddlCategorias.Attributes("onChange") = "Seleccionar(this);"
Ok… ya tenemos nuestro evento en el control… y lo testeamos 😉
image
image
 
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

16 comentarios sobre “Obtener con JavaScript el valor seleccionado en un webcontrol DropDownList.”

  1. 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

  2. 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.

  3. @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?

  4. 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.

  5. 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

  6. @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)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *