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

我想确认这两个选择框都有一个已选择的选项。

一个（非多选）下拉框不可能没有选中的选项！如果您没有在其中一个选项上声明“selected”，浏览器会自动选择第一个选项。

所以：返回真; :-)

如果您想要一个“未选择”的初始状态，您必须为其包括一个无选项选项，通常是第一个：

<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

您可以使用：selected选择器来实现这个功能。

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

友情链接