当不选择选项时，请执行一些操作

Question

我的问题与此相似：jQuery＆lt; select＆gt;如果在多个＆lt; select＆gt;中选择选项，则禁用选项。盒子

和这个：jQuery＆lt; select＆gt;如果在其他＆lt; select＆gt;

中选择选项，则禁用选项

但不同。

我有此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.如果未选择letter的选项，则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进行比较。您从来没有像编写的那样在比较中进入真实条件。如果将警报（或使用调试器）放入其中，您将看到此。

取而代

:selected").val() !=

适当的解决方案JSFIDDLE

您也可以使用选择器中的元素ID来稍微整洁一些。

Answer 2

因为我的评论很接近。我认为我认为您需要您需要的最后一步。

重要的是要记住，一个多个选项选择框将返回值的array。

http://jsfiddle.net/vphpv/31/

相应的代码。

var $form = $('#myForm'),
    $letterlist = $('#letter'),
    $listA = $('#list_of_a'),
    $listB = $('#list_of_b'),
    $listC = $('#list_of_c');
$form.on("submit", function(e) {
    var a, b, c;
    if ($letterlist.val().indexOf("A") != -1) {
        a = $listA.val();
    };
    if ($letterlist.val().indexOf("B") != -1) {
        b = $listB.val();
    };
    if ($letterlist.val().indexOf("C") != -1) {
        c = $listC.val();
    };
    alert("A = " + a + ", B = " + b + " and C = " + c);
    e.preventDefault();
    return false;
});​