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

Question

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

Например:

<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 коробка нет чтобы иметь выбранный вариант!Если вы не заявите 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
}

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

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