Как я могу проверить, что все поля выбора имеют выбранную опцию через JavaScript, JQuery или ...?

Question

У меня есть 2 поля выбора на странице с переменным количеством опций в них.

Например:

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

Я хотел бы убедиться, что в обоих этих полях выбора есть выбранная опция. Моя первоначальная мысль - просто использовать JQuery, но я не могу понять, как это сделать. Мои попытки пока были тщетными, но у меня есть следующий код, который, я думаю, должен работать с отсутствующей ссылкой.

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;
}

Кажется, достаточно просто. Мысли?

Answer 1

В jQuery вы можете использовать селектор :selected, чтобы получить общее количество выбранных опций.Этот номер соответствует числу самих избранных:

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

Answer 2

Я бы хотел убедиться, что в обоих этих полях выбора есть выбранная опция

Для (не multiple) select box not невозможно выбрать выбранную опцию! Если вы не объявите selected на одном из option s, браузер автоматически выберет первый вариант.

Итак: return true;: -)

Если вы хотите иметь «невыбранное» начальное состояние, вам нужно включить для него опцию option без опции, обычно первую:

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

Затем вы можете проверить, была ли выбрана другая опция, кроме того, сказав:

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

Или, если вы хотите использовать пустую строку в качестве допустимого значения, вы можете просто посмотреть на индекс выбранной опции:

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

Answer 3

Для этого вы можете использовать : выбранный селектор .

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
}

Или вы можете проверить их значения с помощью val () . Это предполагает, что у вас есть опция по умолчанию без значения (т.е. пустое строковое значение).

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());