Javascript 如何修复引导样式与Jquery不一致的问题？

我试图使前端两个下拉元素

如果我单击第二个下拉元素而没有设置第一个下拉元素的值，我希望显示一条验证消息，说明需要输入/设置第一个下拉元素。 （我试图实现这一点的原因是，第二个下拉元素的值将取决于用户在第一个下拉元素上选择的内容）

到目前为止，我所做的代码的所有功能似乎都正常工作，除了一个部分，那就是每当我单击第二个下拉元素时，引导样式似乎就乱七八糟了。当元素聚焦时（我不太确定它是否聚焦），它周围的蓝色边框将通过下拉元素显示。我假设这是因为其中一个属性样式上的样式没有随着元素相应地改变

只有当窗口非常小，下拉元素显示在彼此下方时，才会发生这种情况。

有谁能解释一下到底是什么原因造成的，以及我如何解决这个问题

这是我的代码：

//如果下拉列表1的值已更改，请执行以下操作：
$（“.exampleFormControlSelect1”）.change（函数（）{
var selectedValue=$（“.exampleFormControlSelect1”）.val（）；
//如果所选选项具有指定的值，请执行以下操作：
如果（selectedValue）{
$（“#下拉1错误”）.hide（）；
$（“.exampleFormControlSelect2选项”）.show（）；
//做点别的
//警报（selectedValue）；
}
}).触发（“变更”）；
//每当单击下拉列表2且尚未设置下拉列表1值时，显示验证错误。
$（“.exampleFormControlSelect2”）。单击（函数（）{
if（！$（“.exampleFormControlSelect1”）.val（）{
$（“#下拉1错误”）.show（）；
}
});
。exampleFormControlSelect2选项{
显示：无；
}
.cust下拉列表错误{
显示：无；
}

下拉列表1：
选择一个选项。。。
请加载更多选项。。。
示例选项2
备选方案3示例
示例选项4
示例选项5
下拉列表1字段是必需的。
下拉列表2：
选择一个选项。。。
请加载更多选项。。。
Bootstrap在foucus css上带有表单控件，您可以适当地编辑下面的类名。如果不需要阴影，请注释掉框阴影

.form-control:focus {
 color: #495057;
 background-color: #fff;
 border-color: #80bdff;
 outline: 0;
 //box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

显示元素时，第二次选择的底部引导边界将移动到第二次选择的中间

这是一个彻底的攻击，但您可以将其添加到函数中，以强制其松开并再次获得焦点，从而重置其显示位置：

$(".exampleFormControlSelect1").focus();
$(this).focus();

或者使用这两行的替代项：

$(this).blur().focus();

例如：


//如果下拉列表1的值已更改，请执行以下操作：
$（“.exampleFormControlSelect1”）.on（'change'，function（）{
var selectedValue=$（“.exampleFormControlSelect1”）.val（）；
//如果所选选项具有指定的值，请执行以下操作：
如果（selectedValue）{
$（“#下拉1错误”）.hide（）；
$（“.exampleFormControlSelect2选项”）.show（）；
//做点别的
//警报（selectedValue）；
}
});//.触发（“变更”）；
//每当单击下拉列表2且尚未设置下拉列表1值时，显示验证错误。
$（“.exampleFormControlSelect2”）。在（'click'，function（）上{
if（！$（“.exampleFormControlSelect1”）.val（）{
$（“#下拉1错误”）.show（）；
//$（“.exampleFormControlSelect1”）.focus（）；
$（this.blur（）.focus（）；
}
});
。exampleFormControlSelect2选项{
显示：无；
}
.cust下拉列表错误{
显示：无；
}

下拉列表1：
选择一个选项。。。
请加载更多选项。。。
示例选项2
备选方案3示例
示例选项4
示例选项5
下拉列表1字段是必需的。
下拉列表2：
选择一个选项。。。
请加载更多选项。。。
运行此命令并获取：{“message”：“UncaughtTypeError:无法读取未定义的属性'fn'，我编辑了代码段以更改脚本的顺序并链接以修复此问题。框阴影不是多余的，我只需要与元素相关的css（即使是默认情况下），如果文档被任何类型的JS更改，则与元素一起移动，目前情况似乎并非如此。您建议我应该在javascript中使用
。表单控件：focus
，以某种方式向下移动样式？这似乎是以尽可能简单的方式解决此问题的最接近的解决方案。