本文介绍了如何使用 jQuery 实现两个下拉框之间的联动，当第一个下拉框选择某个选项时，自动在第二个下拉框中选择相应的选项。针对两个下拉框选项不完全一致的情况，提供了解决方案，确保在第一个下拉框选择的选项在第二个下拉框不存在时，自动选择第二个下拉框的默认选项。
实现联动下拉框
要实现联动下拉框，我们需要监听第一个下拉框的 change 事件，并在事件处理函数中获取选中的值，然后根据这个值来更新第二个下拉框的选中项。
HTML 结构
首先，我们需要定义两个下拉框的 HTML 结构。为了方便操作，我们为每个下拉框添加唯一的 id，并使用 data-target 属性来指定目标下拉框的 id。
jQuery 代码
接下来，我们使用 jQuery 来实现联动逻辑。
$(document).ready(function(){
$('select').on('change', function() {
// 获取当前被选中的下拉框的 ID
var selected_select = $(this).attr('id');
// 获取目标下拉框的 ID
var selected_target = $(this).attr('data-target');
// 获取选中的选项值
var selectedValue = $(this).val();
// 检查目标下拉框中是否存在对应的选项
var targetedValue = $('#'+selected_target+' option[value='+selectedValue+']').length > 0;
// 选中当前下拉框的对应选项 (确保双向联动)
$('#'+selected_select+' option[value='+selectedValue+']').prop('selected', true);
// 如果目标下拉框存在对应选项，则选中，否则选中默认选项
if(targetedValue === true) {
$('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true);
} else {
$('#'+selected_target+' option[value=""]').prop('selected', true);
}
});
});这段代码首先使用 $(document).ready() 确保在 DOM 加载完成后执行。然后，它监听所有 select 元素的 change 事件。在事件处理函数中，它获取当前被选中的下拉框的 id 和选中的值。然后，它使用 data-target 属性获取目标下拉框的 id。
关键部分是 var targetedValue = $('#'+selected_target+' option[value='+selectedValue+']').length > 0; 这行代码。它检查目标下拉框中是否存在与当前选中值相匹配的选项。如果存在，则 targetedValue 为 true，否则为 false。
最后，根据 targetedValue 的值，代码决定是在目标下拉框中选择对应的选项，还是选择默认选项（value="" 的选项）。
代码解释
- $(document).ready(function(){ ... });：确保在文档加载完成后执行代码。
- $('select').on('change', function() { ... });：监听所有 select 元素的 change 事件。
- $(this).attr('id')：获取当前触发事件的 select 元素的 id 属性值。
- $(this).attr('data-target')：获取当前触发事件的 select 元素的 data-target 属性值。
- $(this).val()：获取当前选中的 option 元素的 value 属性值。
- $('#'+selected_target+' option[value='+selectedValue+']').length > 0：检查目标下拉框中是否存在 value 属性为 selectedValue 的 option 元素。如果存在，返回大于 0 的值，否则返回 0。
- $('#'+selected_target+' option[value='+selectedValue+']').prop('selected', true)：将目标下拉框中 value 属性为 selectedValue 的 option 元素设置为选中状态。
- $('#'+selected_target+' option[value=""]').prop('selected', true)：将目标下拉框中 value 属性为空字符串的 option 元素设置为选中状态（即默认选项）。
注意事项
- 确保引入 jQuery 库。
- data-target 属性的值必须与目标下拉框的 id 属性值一致。
- 默认选项的 value 属性应该为空字符串。
总结
通过使用 jQuery，我们可以轻松实现联动下拉框的功能。通过监听 change 事件并根据选中的值更新目标下拉框的选中项，我们可以提供更好的用户体验。同时，针对选项不完全一致的情况，我们通过检查目标下拉框中是否存在对应选项，并选择默认选项，保证了功能的健壮性。
