当页面上有多个下拉列表时，如何多个下拉选项将类添加到元素?

Question

我目前正在为下拉选择框运行此代码。选择不同的选项时，会将类添加到div 元素中。到目前为止，所有这些代码都可以正常工作。问题是我想让它适用于单个页面上的多个下拉选择器。div mcga_ 具有更改"mcga_1、mcga_2等"的倍数。我尝试运行代码两次并更改元素名称，但只有一个选择器可以工作，另一个不会做任何事情。这是迄今为止有效的方法;

$(document).ready(function(){
$("select[name*='custom_fields[mcgroup1]']").change(function(){
select_changed();
});
});
function select_changed(){
$("div[id*='mcga_']").each(function(){
$(this).removeClass('addThis');
});
$("select[name*='custom_fields[mcgroup1]']").each(function(){
var selected = $(this).val();
$('#'+selected).addClass('addThis');
});
}

这没有问题。它将类"addThis"添加到每个"mcga_*"div。我尝试了以下内容，使其在同一页面上也使用不同的下拉列表，但无济于事。

$(document).ready(function(){
$("select[name*='custom_fields[mcgroup1]']").change(function(){
select_changed();
});
});
function select_changed(){
$("div[id*='mcga_']").each(function(){
$(this).removeClass('addThis');
});
$("select[name*='custom_fields[mcgroup2]']").each(function(){
var selected = $(this).val();
$('#'+selected).addClass('addThis');
});
}
$(document).ready(function(){
$("select[name*='custom_fields[mcgroup2]']").change(function(){
select_changed();
});
});
function select_changed(){
$("div[id*='mcgb_']").each(function(){
$(this).removeClass('addThis2');
});
$("select[name*='custom_fields[mcgroup2]']").each(function(){
var selected = $(this).val();
$('#'+selected).addClass('addThis2');
});
}

任何帮助让此代码清理和使用多个下拉菜单都会很棒。

干杯！

Answer 1

首先，你对你的更改事件使用相同的函数名称。以一种快速而肮脏的方式，你可以select_changed_2左右调用函数。

为了更简洁的方式，我会为您的选择字段推荐数据属性并使用它们。

$(document).ready(function(){
$("select[name*='custom_fields']").change(function(){
select_changed( $(this).attr('data-change-it') );
});
});
function select_changed(change_IDs){
$("div[id*='"+ change_IDs +"']").each(function(){
$(this).removeClass('addThis');
});
$("select[data-change-it*='"+ change_IDs +"']").each(function(){
var selected = $(this).val();
$('#'+selected).addClass('addThis');
});
}

您的选择字段应如下所示：

<select name="custom_fields[mcgroup1]" data-change-it="mcga_"></select>
<select name="custom_fields[mcgroup2]" data-change-it="mcgb_"></select>