避免使用jquery多次选择相同的选项 [英] Avoid same option selected multiple times using jquery

问题描述

我有两个表格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（））; 
} 
}） ; 
}）; 
  

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

您可以测试代码>在这里。

解决方案

问题在于您选择了所有选项（表格1 + 2），而您应该选择属于当前表格的选项，如下所示。

  $（'＃table1 tr'）。each（function（）{
 $（如果（$（'＃table1'）。find（'select option [value（'）'）改变（function（）{// alert（$（this）.val（））
。 ='+ $（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（））; 
} 
}）; 
}）; 
  

Demo @ 小提琴

编辑：

稍微好一些的版本：

  //如果您愿意，可以为您的2个表格（或更多）因为您甚至可能不需要它们
 //< table class =groupped-select...> 
 //然后执行：
 // $（'。grouped-select'）。find（'select'）。on（'change'，function（）{
 //或只需使用标签选择器
 $（'table'）。find（'select'）。on（'change'，function（）{
 //缓存要重复使用的jQuery引用b $ b 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（））; 
} 
}）; 
  

I have two tables Table1 and Table2. Each table contains <select> tag and the options and their values were same.

Now I want to check for each table, there any option exists more than one times. If yes then alert option already selected.

My code is:

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

When select same in first table and second table it will alert option already selected. What's wrong with my code?

You can test the code here.

解决方案

The problem was that you were selecting all options (table1 + 2) whereas you should have selected options belonging to the current table, such as below.

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

Demo@Fiddle

Edit:

A slightly better version:

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

这篇关于避免使用jquery多次选择相同的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！