Question

我需要有关dropdownlist选项相互依赖的帮助。假设我下面有两个下拉列表。

<select name="List1" id="List1">
    <option value="">Select Item</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>  
    <option value="d">d</option>               
</select>

<select id="List2" name="List2">
    <option value="">Select Item</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

下面的场景：

List2会将所有内容列为默认值（List1中没有选择）
如果在List1中选择了选项“a”或“d”，则List2仍将保持相同，未选择任何选项。
如果在List2中选择了选项“b”或“c”，则选择List2中的选项2，并且用户也不能选择List2中的其他选项。
但是，当用户选择“a”或“d”时，列表会再次返回默认值，用户可以选择List2中的任何项目。

如果可能，请帮助您提供示例代码。

谢谢，

Answer 1

似乎逻辑非常具体，所以如果不了解更多细节，我们就无法真正概括。但是，这个jsFiddle应该至少让你开始。这是相关的JavaScript：

// Listen for change event on List1
$("#List1").change(function (e) {

    // Find the selected value from List1
    var selectedValue = $(this).val();
    var $list2 = $("#List2");

    if (selectedValue == 'a' || selectedValue == 'd') {

        // Reset disabled options for List2
        $list2.find("option").removeAttr('disabled');

        // If you want to change the value of List2 back to some default...
        //list2.val('');
    }

    if (selectedValue == 'b' || selectedValue == 'c') {

        // Select option 2 for List2
        $list2.val('2');

        // Disable all other options
        $list2.find("option:not(:selected)").attr('disabled', 'disabled');
    }
});

要概括，您应该向List1的选项添加类（例如class="reset-other-list"或class="restrict-other-list"）。然后，检查是否选择了具有class的选项，而不是检查特定值。如果将来价值发生变化，这将减少头痛。

JQuery - 下拉列表选择了依赖项

1 个答案: