jquery - 未选择选项时执行某些操作

Question

我的问题与此类似: jQuery <select> option disabled if selected in multiple <select> boxes

还有这个: jQuery <select> option disabled if selected in other <select>

但不同。

我有这个 html 表单:

<form method="post" action="" name="form_letter">
<label for="letter">Letter</label><br>
<select multiple="multiple" name="letter[]" id="letter">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<label for="list_of_a">List of A</label><br>
<select multiple="multiple" name="list_of_a[]" id="list_of_a">
    <option value="A1">A1</option>
    <option value="A2">A2</option>
    <option value="A3">A3</option>
    <option value="A4">A4</option>
</select>

<label for="list_of_b">List of B</label><br>
<select multiple="multiple" name="list_of_b[]" id="list_of_b">
    <option value="B1">B1</option>
    <option value="B2">B2</option>
    <option value="B3">B3</option>
    <option value="B4">B4</option>
</select>

<label for="list_of_c">List of C</label><br>
<select multiple="multiple" name="list_of_c[]" id="list_of_c">
    <option value="C1">C1</option>
    <option value="C2">C2</option>
    <option value="C3">C3</option>
    <option value="C4">C4</option>
</select>

<input type="submit" value="Save">
</form>​

我想要实现的是，当未选择 select[name="letter[]"] 的 option 时，然后单击submit 按钮，对应字母的 select 列表为 null 或 empty。

场景:
1. 如果select[name="letter[]"]的option A没有被选中，则点击submit按钮， >select[name="list_of_a[]"] 即使选择了其中一个选项，也将为 empty 或 null。

2. B 和 C 也是如此。

3. 如果未选择字母的任何选项，则list_of_a、list_of_b和list_of_c为空。

这是我的js:

$("form[name='form_letter']").on("submit", function(e) {
    if ($("select[name='letter[]']").find("option:not(:selected)").val() == "A") {
        $("select[name='list_of_a[]']").val("");
    };

    if ($("select[name='letter[]']").find("option:not(:selected)").val() == "B") {
        $("select[name='list_of_b[]']").val("");
    };

    if ($("select[name='letter[]']").find("option:not(:selected)").val() == "C") {
    $("select[name='list_of_c[]']").val("");
    };

alert("A = " + $("select[name='list_of_a[]']").val() + " and B = " + $("select[name='list_of_b[]']").val() + " and C = " + $("select[name='list_of_c[]']").val());

    e.preventDefault();
    return false;
});​

我一直在这里工作http://jsfiddle.net/VPhPv/21/
但被卡住了。请帮助我。

Answer 1

您的问题是您将单个值与等于的值与 :selected 的 :not 进行比较。您永远不会像您所写的那样进入 if 比较的真实条件。如果您将警报(或使用调试器)放入其中，您将看到这一点。

相反，您需要与选择的值进行不等于比较:

:selected").val() !=

appropriate solution jsfiddle

您还可以通过在选择器中使用元素 id 来简化一些事情。