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.如果选择任何的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

由于我的评论是接近。我想我会提出我认为你需要的最后一招。

重要的是要记住，像这样的多选项选择框将返回值为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; 
});​ 

Answer 2

您的问题是，您正在比较单个值等于:not的:selected。就像你写的那样，你从来没有进入真正的条件。如果您将警报（或使用调试器）放入它们中，您会看到这一点。

相反，你需要做一个不等于比较的值是为选择：

:selected").val() !=

appropriate solution jsfiddle

您还可以通过使用元素ID neaten了一点东西你选择。