Acción al seleccionar una opcion de un combobox

[Lucieta86]

Hola chicos! tengo el siguiente combobox:

Código HTML:

<select id="combobox">
        <option value="">Opciones</option>
        <option value="Todos">Todos</option>
        <option value="Nada">Nada</option>
</select>
 

Y quiero que al seleccionar una de las dos opciones, un conjunto de checkbox que tengo, se checkeen todos o ninguno.

Es decir, si selecciono la opcion TODOS, todos los checkbox que tengo creados en esa pagina se chekearan y por contra, si selecciono NADA, todos se quedaran sin checkear.

Este es el código que habia implementado, pero no funciona y no se me ocurre nada mas:

Código Javascript:

$( "#combobox" ).autocomplete({
        change: function(event, ui) { 
        alert("entra");
        if($('#combobox option:selected').val()=='Todos'){
            for (i=0;i<document.mostrarAulas.elements.length;i++)
                if(document.mostrarAulas.elements[i].type == "checkbox")
                    document.mostrarAulas.elements[i].checked=1 
        }
        if($('#combobox option:selected').val()=='Nada'){
            for (i=0;i<document.mostrarAulas.elements.length;i++)
                if(document.mostrarAulas.elements[i].type == "checkbox")
                document.mostrarAulas.elements[i].checked=0 
        } }
    });
 

Probe cambiando autocomplete por combobox, tambien cambiando change por click... y nada. No entra! no hace nada al seleccionar una de las dos opciones.

No se como hacerlo y he buscado info y no he encontrado nada que me sirviera. A ver si me podeis ayudar.

Gracias

[maycolalvarez]

el código anterior es del framework jQuery ¿importaste jQuery en el HEAD del HTML?: en tal caso es tema de javascript

además de que debes usar colecciones para acceder a los elementos de los formularios

[Lucieta86]

Si,si, siento no haberlo comentado.

El código primero es html y esta en el body, el de despues de jquery, (con todas sus librerias porsupuesto) y esta en la parte del head.

Eso esta claro... ;)

[Lucieta86]

Como puedo obtener el valor que se a elegido? y aplicarle despues una accion?

[Lucieta86]

Despues de haber estado haciendo pruebas, me he dado cuenta que si fuera un combobox normal, sin el jquery, si que funciona... pero al aplicarle jquery, no se porque ya no me obtiene el valor!

Con esto solo, funciona, pero no tiene el aspecto que yo quiero:

Código Javascript:

$("#opciones").change(function (){
        alert($('#opciones').val());
    });
 

Si añado esta parte, que es la que le da el aspecto de jquery ui, igual que el resto de la página, ya no funciona y no entiendo porque...

Código Javascript:

$("#opciones" ).combobox();
 

Alguien entiende algo del tema??
Gracias chicos!

[garciasanchezdani]

Hola Lucieta, ¿y qué es #opciones?

[Lucieta86]

ups... esque le he cambiado el nombre... es el id del select, que antes se llamaba combobox... y ahora opciones, porque me parecia que me daba problemas con ese nombre.

Por cierto, pego el codigo que funciona, pero esta claro, sin el aspecto del jquery ui... :(

Código Javascript:

//$("#opciones" ).combobox();
        
 
    $( "#opciones" ).change( function() { 
        if($('#opciones').val()=='Todos'){
            $('.aulaRes').each( function() {
                this.checked = true;
            })          
        }
        if($('#opciones').val()=='Nada'){
            $('.aulaRes').each( function() {            
                this.checked = false;
                })
        } 
    });
 

GRACIAS!! :)

[garciasanchezdani]

Prueba a cambiar #opciones por .ui-widget select, es decir:

Código Javascript:

$( ".ui-widget select" ).change( function() { 
        if($('.ui-widget select').val()=='Todos'){
            $('.aulaRes').each( function() {
                this.checked = true;
            })          
        }
        if($('.ui-widget select').val()=='Nada'){
            $('.aulaRes').each( function() {            
                this.checked = false;
                })
        } 
    });
 

...y creo que más bien sería algo así:

Código Javascript:

$( ".ui-widget select" ).change( function() { 
        if($('.ui-widget select option:selected').text()=='Todos'){
            $('.aulaRes').each( function() {
                this.checked = true;
            })          
        }
        if($('.ui-widget select option:selected').text()=='Nada'){
            $('.aulaRes').each( function() {            
                this.checked = false;
                })
        } 
    });
 

Prueba y me dices...Saludos

[Lucieta86]

Lo acabo de probar... no funciona... :(

Sin el $("#opciones" ).combobox(); sale un select normal de toda la vida, y poniendolo como tu dices, pierde la funcionalidad..

Gracias.

Seguimos buscando!

[maycolalvarez]

jQueryUI como muchos otros FW GUI suelen reemplazar los selects tradicionales por "selects emulados con un input", por lo que debes de consultar en su api para obtener el valor seleccionado, ya que como te indique no es un select común

[quike88]

Hola,

Prueba así:

Código Javascript:

$( "#combobox" ).autocomplete({
        change: function(event, ui) { 
        if($(this).val()=='Todos'){
            $('.aulaRes').each( function() {
                this.checked = true;
            })        
        }
        if($(this).val()=='Nada'){
            $('.aulaRes').each( function() {
                this.checked = true;
            })        
        } }
    });
 

O también puedes probar con ui.item.value en lugar de $(this).val().

Saludos.

[Lucieta86]

NO ha funcionado... :(

El código que yo pegue, funciona bien, pero me sale el tipico combobox de toda la vida...

Gracias por la ayuda!

Alguna sugerencia mas?

[Lucieta86]

Porfa, alguien que entienda del tema, del autocomplete en jquery...

No lo he podido solucionar....