3

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

这： 如果在其他 <select> 中选择，则禁用 jQuery <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>​

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

使用场景：
1. 如果optionA ofselect[name="letter[]"]没有被选中，那么点击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/
研究它， 但被卡住了。请帮帮我。

4

2 回答 2

2

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

相反，您需要对所选值进行不等于比较：

:selected").val() !=

适当的解决方案jsfiddle

您还可以通过在选择器中使用元素 ID 来稍微整理一下。

于 2012-12-18T17:53:02.863 回答
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;
});​
于 2012-12-19T14:49:30.677 回答