Question

页面上有5个选择控件，每个控件都有相同的选项值，当我在第一个下拉列表中选择一个值时，我不应该再允许在其他值中再次选择相同的值。我尝试过类似下面的内容。

$("#div").find(".selectClass").live("change", function (e) {
    var selectedValue = $(this).val();
    var controlId = $(this).attr("id");
    var isPropertyAlreadySelected = false;

    $("#div").find(".selectClass").each(function () {
        var currentSelect = $(this);
        if (controlId != currentSelect.attr("id") && currentSelect.val() == selectedValue) {
            isPropertyAlreadySelected = true;
        }
    });

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

编辑：删除了对“isPropertyAlreadySelected”标志的检查;但我仍然可以选择其他下拉值。

即使我执行“return false”或“e.preventDefault（）”，仍会在其他下拉菜单中选择该值。请指出我正确的方向。在此先感谢!!

Answer 1

正如其他人所说，似乎不可能，因为价值已经改变。

请参阅此相关问题和解决方案：jQuery prevent change for select

以下是jsFiddle

中问题的最小重现

Answer 2

您正在运行的问题是，当您的更改事件触发时，select的值已经更改。

您需要拥有当前所选值的列表，并在此处重置更改的选项：

if (isPropertyAlreadySelected) {
    // Reset here
}

只需使用页面加载时选择的值填充数组，并在每次选择选项时更新此数组。

我刚刚测试了mousedown事件。这个选项在选项真正被选中之前触发。试试这里：http://jsfiddle.net/g3rsF/1/

这并不能解决所有情况，因为用户也可以通过按键选择。

Answer 3

将当前所选项目保存在下拉列表中并使用此小助手：）

<select id="s1" class="selectClass">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<select id="s2" class="selectClass">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

$(document).on("change", ".selectClass", function(ev) {
    var cur = $(this),
        text = cur.find("option:selected").text(),
        isAlreadySelected;

    isAlreadySelected = $(".selectClass").not("#" + this.id).filter(function() {
        return $(this).find("option:selected").text() === text;
    });

    if (isAlreadySelected.length) {
        cur.prop("selectedIndex", cur.prop("selIdx") || 0);
    }

    cur.data("selIdx", cur.prop("selectedIndex"));
});

Example

选择更改事件不会保留上次选择的内容

3 个答案: