我有两个表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());
}
});
});
当在第一个表和第二个表中选择相同时，它将提醒已选择的选项。我的代码出了什么问题？
你可以测试代码 这里。
问题是您正在选择所有选项（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());
}
});
});
演示@小提琴
编辑：
一个稍好的版本：
// 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());
}
});
你正在选择所有的 options 而不是在当前表中。
现场演示
更改
$('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());
}
});
如果将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
}
});
});
$('#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());
}
});
});
试试吧 属性选择器 在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());
}
});
小提琴