Javascript 如何将jQuery功能与分组元素分组？

我的文档包含分组的元素，这些元素带来了功能。我希望能够将这组元素及其相互之间的交互放在页面上任何可能的地方

当我尝试这样做时，我当前的jQuery代码试图在与另一个组交互时更改一个组的元素。如何将这些组及其功能分开，但能够使用相同的jQuery功能（防止编写双重功能）

这是我的代码：

//如果下拉列表1的值已更改，请执行以下操作：
$（“.dd第一次检查”）.change（函数（）{
var selectedValue=$（“.dd第一次检查”）.val（）；
//如果所选选项具有指定的值，请执行以下操作：
如果（selectedValue）
{
//$（“#下拉1错误”）.hide（）；
$（“#Dropdown1 error”）.addClass（“d-none”）；
$（“.dd第二个检查选项”）.show（）；
//做点别的
//警报（selectedValue）；
}
}).触发（“变更”）；
//每当单击下拉列表2且尚未设置下拉列表1值时，显示验证错误：
$（“.dd第二次检查”）。单击（函数（）{
//如果所选选项没有指定值，请执行以下操作：
如果（！$（“.dd第一次检查”）.val（）
{
//显示验证消息：
//$（“#下拉1错误”）.show（）；
$（“#Dropdown1 error”）.removeClass（“d-none”）；
$（this.blur（）.focus（）；
}
});
//当下拉列表1不包含选定值时，不允许更改下拉列表2的值
//（这可以防止在客户端手动编辑DOM时发送“错误”数据）：
$（“.dd第二次检查”）.change（函数（e）{
如果（！$（“.dd第一次检查”）.val（）
{
警报（“上一个下拉列表中未选择任何选项”）；
//要做：仍然需要一些代码
//e、 防止违约；
}
});  
.dd第二个检查选项
{
显示：无；
}
.dd-1组
{
背景颜色：绿色；
}
.dd-2组
{
背景色：红色；
}

第1组下拉列表1：
选择一个选项。。。
请加载更多选项。。。
示例选项2
备选方案3示例
示例选项4
示例选项5
下拉列表1字段是必需的。
第1组下拉列表2：
选择一个选项。。。
请加载更多选项。。。
第2组下拉列表1：
选择一个选项。。。
请加载更多选项。。。
示例选项2
备选方案3示例
示例选项4
示例选项5
下拉列表1字段是必需的。
第2组下拉列表2：
选择一个选项。。。
请加载更多选项。。。
我修改了您的fiddle，以便在父组中查找元素，并为您使用类而不是id。这些行还有一个名为group的附加类

这用于查找当前项的父项，其类别为group。然后在该父元素中搜索第二个元素

你需要确保你只关注团队内部


//如果下拉列表1的值已更改，请执行以下操作：
$（“.dd第一次检查”）.change（函数（）{
var selectedValue=$（this.val（）；
//获取父组元素
var$group=$（this.parents（'.group'）；
//如果所选选项具有指定的值，请执行以下操作：
如果（selectedValue）
{
//$（“#下拉1错误”）.hide（）；
$group.find（“.dropdown error”）.addClass（“d-none”）；
$group.find（“.dd第二个检查选项”）.show（）；
//做点别的
//警报（selectedValue）；
}
}).触发（“变更”）；
//每当单击下拉列表2且尚未设置下拉列表1值时，显示验证错误：
$（“.dd第二次检查”）。单击（函数（）{
//获取父组元素
var$group=$（this.parents（'.group'）；
//如果所选选项没有指定值，请执行以下操作：
if（！$group.find（“.dd第一次检查”）.val（））
{
//显示验证消息：
//$（“#下拉1错误”）.show（）；
$group.find（“.dropdown error”）.removeClass（“d-none”）；
$（this.blur（）.focus（）；
}
});
//当下拉列表1不包含选定值时，不允许更改下拉列表2的值
//（这可以防止在客户端手动编辑DOM时发送“错误”数据）：
$（“.dd第二次检查”）.change（函数（e）{
//获取父组元素
var$group=$（this.parents（'.group'）；
if（！$group.find（“.dd第一次检查”）.val（））
{
警报（“上一个下拉列表中未选择任何选项”）；
//要做：仍然需要一些代码
//e、 防止违约；
}
});
.dd第二个检查选项
{
显示：无；
}
.dd-1组
{
背景颜色：绿色；
}
.dd-2组
{
背景色：红色；
}

第1组下拉列表1：
选择一个选项。。。
请加载更多选项。。。
示例选项2
备选方案3示例
示例选项4
示例选项5
下拉列表1字段是必需的。
第1组下拉列表2：
选择一个选项。。。
请加载更多选项。。。
第2组下拉列表1：
选择一个选项。。。
请加载更多选项。。。
示例选项2
备选方案3示例
示例选项4
示例选项5
下降