Javascript 避免使用jquery多次选择同一选项

我有两张桌子。表一和表二。 每个表都包含

标记，选项及其值相同

现在我想检查每个表，任何选项都存在不止一次。如果是，则已选择警报选项

我的代码是：

$('#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());
        }
    });
});

当在第一个表和第二个表中选择相同选项时，它将警告已选择的选项。我的代码怎么了

---

您可以测试代码

您选择的是所有

选项

，而不是当前表中的选项

改变

到

您可以为每行生成一个处理程序，而不是多个处理程序，并进一步简化和优化如下代码

$('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());
    }
});

---

问题是您选择的是所有选项（表1+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());   
        }
    });
});

演示@

编辑：

稍好一点的版本：

// 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());
    }
});

//如果愿意，可以为2个表（或更多表）创建一个类，这样可以避免使用ID，因为您甚至不需要它们
// 
//然后做：
//$（'.grouped select'）.find（'select'）.on（'change'，function（）{
//或者只使用标记选择器
$（'table'）.find（'select'）.on（'change'，function（））{
//缓存反复使用的jQuery引用
var$this=$（this）；
if（$this.closest（'table'）.find（'select option[value='+$this.val（）+']：selected'）。长度>1）{
警报（“已选择选项”）；
$this.val（$this.find（“选项：第一”）.val（））；
}
});

如果您将If语句更改为特定于每个应执行此操作的表，那么：

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

和

if（$（'#table2 tr option[value='+$（this.val（）+']：selected'）。长度>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不重要），然后像以前一样运行检查

更妙的是，你可以使用最接近的选择器

$('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
        }
    });
});

---

在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());
    }
});

---

它们都是。（每个表和每行）@Tushar-为什么其他人使用.Each（）循环对于这个答案来说这是不必要的对！你是对的。但是他们仍然站了起来。你认为

每个
在这里都是必要的吗？可以optimized@Tushar-罗斯只需要回答问题，不需要回答问题best@JqueryKing我觉得最好的答案应该被接受，而不是有效的答案
$('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
        }
    });
});

$('#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());
        }
    });
});

$('[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());
    }
});