0

Estoy utilizando este plugin para animar un Dropdown:

https://dane.one/projects/jquery-dropdown/docs/

tipo select pero con listas del tipo:

<ul id="ul_prueba" data-dropdown='{ "closeReset": false }'>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3                    
        <ul>
            <li>Option 3.1</li>
            <li>Option 3.2</li>
            <li>Option 3.3
               <ul>
                  <li>Option 3.3.1</li>
                  <li>Option 3.3.2</li>
                  <li>Option 3.3.3</li>
               </ul>
            </li>
        </ul>
    </li>                       
</ul>

Lo que necesito es obtener el valor seleccionado al enviar el formulario. ¿Cómo puedo hacerlo?.

3
  • Ojo, son listas con elementos anidados, debes especificar si los sub-elementos (2.1, 2.2, 2.3) entran también en la intención de obtener el valor seleccionado. Por cierto, es una lista incoherente ¿cómo es que el 2.1 es parte dependiente del 1.3 ? ¿ ... ?
    – A. Cedano
    Commented el 11 ene. 2019 a las 15:10
  • Gracias por tu respuesta Cedano. Si, todos los elementos entran en la intencion de obtener el valor seleccionado. En cuanto a la coherencia, es solo un ejemplo a los efectos de mostrar como es la lista, de todas formas lo modifico. Gracias
    – Patricio
    Commented el 11 ene. 2019 a las 15:19
  • cuando seleccionas una opcíon se agrega alguna clase ?
    – Federico
    Commented el 11 ene. 2019 a las 15:51

5 respuestas 5

3

Puedes hacerlo así:

  • Creas un selector que abarque todos los li dentro del ul con id ul_prueba, valiéndote para ello de querySelectorAll
  • Asignas un click listener a todos esos elementos con el forEach
  • Con la ayuda de firstChild y de nodeValue obtienes solamente el valor del primer hijo del elemento, eso debido a que de lo contrario en casos como Option 3 te traerá el valor de ese li y del ul anidado con todos sus sub li.
  • Se usará también trim() para eliminar posibles espacios o saltos de línea sobrantes.
  • Tendrás finalmente en la variable liText el dato, para poder usarlo o pasarlo a donde necesites.

var allLi = document.querySelectorAll('#ul_prueba>li');
allLi.forEach(function(item) {
  item.addEventListener('click', function(e) {
        var liText=e.target.firstChild.nodeValue.trim();
        console.log(liText);
  });
});
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1</li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

5
  • Gracias por tu ayuda Cedano, como seria para poder encontrar el valor seleccionado al querer enviar el formulario?. Ahi modifique la pregunta. Gracias!
    – Patricio
    Commented el 11 ene. 2019 a las 15:46
  • @Patricio podrias agregar un input hiden y en vez de dar el alert() pones tipo $("#seleccion").val(e.target.innerHTML); asi le pones un valor al input y lo podes enviar tramite el submit del form
    – Federico
    Commented el 11 ene. 2019 a las 15:59
  • @Patricio la respuesta responde a tu planteamiento original. En cuanto a enviarlo el valor seleccionado al enviar el formulario, eso no es posible con listas ul ... li, ya que los mismos son valores fijos, no tienen ningún indicador de selección. Para eso necesitarás usar sea radiobutton, checkbox, select o algo así, donde es posible seleccionar uno entre varios valores. Las listas no son para eso. De todos modos, creo que deberías plantear esa duda en otra pregunta, revisando primero entre las preguntas del sitio, porque eso seguro que ha sido respondido ya aquí.
    – A. Cedano
    Commented el 11 ene. 2019 a las 16:35
  • Gracias Cedano, estoy intentando solucionarlo como lo sugirio Federico en el comentarios anterior. Gracias!
    – Patricio
    Commented el 11 ene. 2019 a las 16:39
  • 1
    @Patricio pero si estás creando tu propio código es mejor que uses los elementos que existen para las cosas que quieres hacer, en vez de recurrir a procedimientos extraños. A no ser que obligatoriamente necesites un li. En ese caso se puede hacer de otras formas, aunque en vez de crear más elementos adicionales yo usaría otras cosas como los atributos data. O una etiqueta interna value o id que iría dentro del mismo li y que cambiaría según el mismo sea clickeado o no. De todos modos, dado que no es un elemento para eso, te verás en la dificultad de manejar el marcado/desmarcado.
    – A. Cedano
    Commented el 11 ene. 2019 a las 17:05
1

Es cierto que el plugin puedes pasarle un tag ul y te armara un dropdown, pero para que complicarse si el plugin también te permite pasarle un select option y también te armara un dropdown, con la ventaja que tu select option quedara oculto y cada vez que cambies de valor automáticamente se cambia el select. Al final puedes obtener tu valor pegándole al id del select option.

Te dejo dos ejemplos, no se cual de los te guste más.

El dropdown con el grupo 3 no anidado:

<select id="ul_prueba" data-dropdown='{ "nested": false, "closeReset": false }'>
    <option>Option 1</option>
    <option>Option 2</option>
    <optgroup label="Group 3">
        <option>Option 3.1</option>
        <option>Option 3.2</option>
        <option>Option 3.3</option>
    </optgroup>
</select>

El dropdown con el grupo 3 anidado:

<select id="ul_prueba" data-dropdown='{ "nested": true, "closeReset": false }'>
    <option>Option 1</option>
    <option>Option 2</option>
    <optgroup label="Group 3">
        <option>Option 3.1</option>
        <option>Option 3.2</option>
        <option>Option 3.3</option>
    </optgroup>
</select>

Inicializas tu select option con $('#ul_prueba').dropdown();

Y para obtener el valor con $('#ul_prueba').val();

Como puedes ver de esta forma es mucho mas sencillo de obtener el valor del dropdown.

Actualizando

Una forma de utilizar grupos dentro de grupos es la siguiente:

<ul id="ul_prueba" data-dropdown='{ "closeReset": false }'>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3
        <ul>
            <li>Option 3.1</li>
            <li>Option 3.2</li>
            <li>Option 3.3
               <ul>
                  <li>Option 3.3.1</li>
                  <li>Option 3.3.2</li>
                  <li>Option 3.3.3</li>
               </ul>
            </li>
        </ul>
    </li>
</ul>

Si en tal caso necesitas que el valor sea distinto al texto que muestras debes de agregar el siguiente atributo data-dropdown-value a cada una de las opciones.

<ul id="ul_prueba" data-dropdown='{ "closeReset": false }'>
    <li data-dropdown-value="1">Option 1</li>
    <li data-dropdown-value="2">Option 2</li>
    <li>Option 3
        <ul>
            <li data-dropdown-value="3.1">Option 3.1</li>
            <li data-dropdown-value="3.2">Option 3.2</li>
            <li>Option 3.3
               <ul>
                  <li data-dropdown-value="3.3.1">Option 3.3.1</li>
                  <li data-dropdown-value="3.3.1">Option 3.3.2</li>
                  <li data-dropdown-value="3.3.1">Option 3.3.3</li>
               </ul>
            </li>
        </ul>
    </li>
</ul>

De esta forma (como ya no existe los select option) ya no se podrá seleccionar la información como si de un select option se tratara si no que, se utilizara la función value del propio plugins.

Para inicializar: $('#ul_prueba').dropdown();

Para obtener el valor hay dos formas:

Forma 1: $("#ul_prueba").dropdown("value");

Forma 2: $("#ul_prueba").data("plugin.dropdown").value();

De las dos formas debería de funcionar, pero en algunas versiones la forma 1 a veces se queda colgada, Te recomiendo probar las dos.

2
  • Gracias Orlando por tu respuesta, es cierto lo que dices y mucho mas conveniente, el inconveniente es que tengo anidado 2 niveles y ahi deja de funcionar como quiero. Eh probado con tu ejemplo anidando 2 niveles pero no funciona como deseo. Sabes si se puede hacer?. Gracias!
    – Patricio
    Commented el 11 ene. 2019 a las 19:41
  • @Patricio e actualizado la respuesta.
    – dlr
    Commented el 18 ene. 2019 a las 14:57
0

Así:

var valor = $('#nombreselect option').val();
2
  • 4
    este codigo funciona solo para <select> no creo que sea eficaz con las listas
    – Federico
    Commented el 11 ene. 2019 a las 15:03
  • Gracias por su respuesta. Si, la respuesta solo funciona con los select. Gracias
    – Patricio
    Commented el 11 ene. 2019 a las 15:21
0

Puedes usar this para obtener el elemento actual después de que se le haga click. En el caso de que cada Li tenga un id podrías hacer lo siguiente:

$(function(){ 
   $('ul li').click(function(e) 
   { 
       console.log('Seleccionaste el elemento con id: ' + this.id);
   // Aquí van tus instrucciones... 
   });
});
3
  • Gracias por su respuesta, en realidad el dropdown lo tengo en un formulario, es decir que necesito el valor al enviar el formulario. Gracias!
    – Patricio
    Commented el 11 ene. 2019 a las 15:26
  • Estas usando php?. Por favor edita el código, solo nos muestras el ul y si estas trabajando con php o ajax seria bueno saber como esta estructurado. Commented el 11 ene. 2019 a las 15:28
  • Sisi, y jQuery.
    – Patricio
    Commented el 11 ene. 2019 a las 15:29
-1

Puedes hacerlo asi:

// seleccionamos todos los li que esten dentro de un ul y hacemos un loop
for(el of document.querySelectorAll("ul li")){
     // le asignamos un evento click a cada 1
     el.addEventListener("click",(e) =>{
     // recibimos el evento y paramos su propagacion a otros elementos
     e.stopPropagation();
    // seleccionamos el evento clickeado lo dividimos hasta que empieze el siguiente ul obetenemos el primer elemento
 // y usamos la funcion trim() para eliminar los espacion
     console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1
         <ul>
              <li>Option 3.1.1</li>
              <li>Option 3.1.2</li>
              <li>Option 3.1.3</li>
           </ul>
         </li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

2
  • Hola Bryro, las publicaciones que son básicamente código se consideran de baja calidad. Deberías editar tu respuesta para añadir algo más de detalle: ¿qué es lo que has cambiado? ¿por qué esos cambios solucionan el problema? Lee Cómo responder para más información.
    – Jorgesys
    Commented el 15 ene. 2019 a las 17:47
  • ok vale! ..............
    – Bryro
    Commented el 15 ene. 2019 a las 17:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.