javascript - 我如何通过 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 选择器来获取选择的全部选项。这个数字与 select 本身的数量相匹配:

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