¿Cómo puedo verificar que todas las cajas de selección tienen una opción seleccionada a través de JavaScript o jQuery o ...?

Question

Tengo 2 cajas de selección en una página con un número variable de opciones en ellos.

Por ejemplo:

<fieldset>
    <label for="fizzwizzle">Select a Fizzwizzle</label>
    <select name="fizzwizzle" id="fizzwizzle" size="10">
        <option>Fizzwizzle_01</option>
        <option>Fizzwizzle_02</option>
        <option>Fizzwizzle_03</option>
        <option>Fizzwizzle_04</option>
    </select>
</fieldset>
<fieldset>
    <label for="fizzbaggot">Select a Fizzbaggot</label>
    <select name="fizzbaggot" id="fizzbaggot" size="10">
        <option>Fizzbaggot_01</option>
    </select>
</fieldset>

Me gustaría para verificar que estos dos cuadros de selección tienen una opción seleccionada. Mi idea inicial es simplemente usar jQuery pero me parece que no puede encontrar la manera de hacer eso. Mis intentos hasta ahora han sido inútiles, pero tengo el siguiente código que creo que debe trabajar con el eslabón perdido.

function verify_selectboxen_selection() {
    var allSelected = true;

    $('select').each(function() {
      /* if select box doesn't have a selected option */
            allSelected = false;
            break;
    });

    if (!allSelected) {
        alert('You must select a Job and a Disposition File.');
    }
    return allSelected;
}

Parece bastante simple. Pensamientos?

Answer 1

En jQuery se puede utilizar el selector de :selected para obtener las opciones seleccionadas en total. Este número cabo para que coincida con el número de selectos propios de:

if ($("select").length === $("option:selected").length) {
  // they match
}

Answer 2

  

Me gustaría comprobar que ambas cajas de selección tienen una opción seleccionada

No es posible que una caja (no multiple) select no para tener una opción seleccionada! Si no se declara selected en uno de los option s, el navegador automáticamente seleccionará la primera opción.

Por lo tanto: return true;: -)

Si usted quiere tener un estado ‘no seleccionada’ inicial, se tendría que incluir un option-opción sin por ello, por lo general la primera:

<select name="fizzbaggot">
    <option value="" selected="selected">(Select a fizzbaggot)</option>
    <option>foo</option>
    <option>baz</option>
    <option>bar</option>
</select>

A continuación, se puede comprobar si una opción diferente a la que uno ha sido seleccionado, ya sea diciendo:

$('select').each(function() {
    if ($(this).val()!=='')
        allSelected= false;
});

O, si es posible que desee utilizar la cadena vacía como un valor válido, puede simplemente mirar el índice de la opción seleccionada:

$('select').each(function() {
    if (this.selectedIndex===0)
        allSelected= false;
});

Answer 3

Puede utilizar el :. Seleccionada selector de para este

var unselected = [] 
$('select').each(function(){
    if (0 == $(this).find('option:selected').length) {
        unselected.push(this.id);
    }
});

if (unselected.length != 0) {
    // unselected contains the ids of non-selected select boxes
}

O se puede comprobar con sus valores val () . Esto supone que usted tiene una opción por defecto sin valor (es decir, valor de cadena vacía).

var unselected = [] 
$('select').each(function(){
    if ('' == $(this).val()) {
        unselected.push(this.id);
    }
});

if (unselected.length != 0) {
    // unselected contains the ids of non-selected select boxes
}

Answer 4

 function checkSelects() {
        return $("select :selected").length == $("select").length;
    }

alert(checkSelects());