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.1
es parte dependiente del1.3
? ¿ ... ?