1

在一个页面上有 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()”，该值仍会在其他下拉列表中被选中。请指出我正确的方向。提前致谢！！

4

3 回答 3

1

正如其他人所提到的，这似乎是不可能的，因为价值已经改变了。

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

这是jsFiddle中问题的最小重现

于 2012-09-17T15:27:35.247 回答
1

您遇到的问题是，当您的更改事件触发时，选择的值已经更改。

您需要有一个当前选定值的列表并在此处重置更改的选项：

if (isPropertyAlreadySelected) {
    // Reset here
}

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

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

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

于 2012-09-17T15:39:35.587 回答
0

将当前选定的项目保存在下拉列表中并使用这个小助手:)

<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"));
});​

例子

于 2012-09-17T15:46:13.647 回答