Question

我有两个表Table1和Table2。每个表都包含<select>标记，选项及其值相同。

现在我想检查每个表，有多个选项存在多次。如果是，则已选择警报选项。

我的代码是：

$('#table1 tr').each(function() {
    $(this).find('select').change(function() { //alert($(this).val())
        if ($('option[value=' + $(this).val() + ']:selected').length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

$('#table2 tr').each(function() {
    $(this).find('select').change(function() { //alert($(this).val())
        if ($('option[value=' + $(this).val() + ']:selected').length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

当在第一个表和第二个表中选择相同时，它将提醒已选择的选项。我的代码出了什么问题？

您可以测试代码here。

Answer 1

问题在于您选择了所有选项（table1 + 2），而您应该选择属于当前表的选项，例如下面的内容。

$('#table1 tr').each(function() {                                       
    $(this).find('select').change(function(){//alert($(this).val())
        if( $('#table1').find('select option[value='+$(this).val()+']:selected').length>1){
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());   
        }
    });
});

$('#table2 tr').each(function() {                                       
    $(this).find('select').change(function(){//alert($(this).val())
        if($('#table2').find('select option[value='+$(this).val()+']:selected').length>1){
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());   
        }
    });
});

演示@ Fiddle

修改

稍微好一点的版本：

// Have a class if you will, for your 2 tables (or more) which would avoid the use of ID's as you may not even need them // <table class="grouped-select" ... > // and then do: // $('.grouped-select').find('select').on('change', function() { // or just use tag selector $('table').find('select').on('change', function() { //Cache jQuery references that you'd reuse over and over var $this = $(this); if( $this.closest('table').find('select option[value=' + $this.val() + ']:selected').length > 1) { alert('option is already selected'); $this.val($this.find("option:first").val()); } });

Answer 2

您正在选择所有options而不是当前表格。

<强> Live Demo

更改

$('option[value=' + $(this).val() + ']:selected')

到的

$(this).closest('table').find('option[value='+$(this).val()+']:selected')

您可以为每一行创建单个处理程序而不是多个，并进一步简化和优化此类代码。

$('select').change(function () {
    if ($(this).closest('table').find('option[value=' + $(this).val() + ']:selected').length > 1)
    {
        alert('option is already selected');
        $(this).val($(this).find("option:first").val());
    }
});

Answer 3

如果将if语句更改为特定于应该执行此操作的每个表。所以：

if($('#table1 tr option[value='+$(this).val()+']:selected').length>1)

和if($('#table2 tr option[value='+$(this).val()+']:selected').length>1)

实际上，如果您将选择器更改为父选择器，则只能使用此类表中的一个代码块：

$('table').each(function() {
    $(this).find('select').change(function() {

        if ($(this).parent().parent().parent().parent().find($('tr option[value=' + $(this).val() + ']:selected')).length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val()); //put it back to 1
        }
    });
});

在这一个中，它循环遍历所有表，并且在change事件中找到它所属的表（因此id无关紧要），然后像以前一样运行检查。

甚至可以使用.closest选择器

$('table').each(function() {
    $(this).find('select').change(function() {

        if ($(this).closest('table').find($('tr option[value=' + $(this).val() + ']:selected')).length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val()); //put it back to 1
        }
    });
});

Answer 4

$('#table1 tr').each(function() {
    $(this).find('select').change(function() { //alert($(this).val())
        if ($('#table1 tr td select  option[value=' + $(this).val() + ']:selected').length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

$('#table2 tr').each(function() {
    $(this).find('select').change(function() { //alert($(this).val())
        if ($('#table2 tr td select option[value=' + $(this).val() + ']:selected').length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

Answer 5

尝试使用jquery

中的属性选择器

$('[id ^= "table"] tr').find('select').change(function() {
    if ($(this).closest('table').find('option[value=' + $(this).val() + ']:selected').length > 1) {
        alert('option is already selected');
        $(this).val($(this).find("option:first").val());
    }
});

Fiddle

避免使用jquery多次选择相同的选项

5 个答案: