基于jQuery实现两个下拉框联动自动选择功能求助

需求：表单中有REGNUM（编号）和FNAME（姓名）两个下拉选择框，当手动选择或修改任意一个下拉框时，另一个下拉框自动选中对应UID的选项。两个下拉框的option值均对应数据库中的UID。

数据库表结构 #

现有HTML代码 #

<select id="regnum">
    <option value="1">007</option>
    <option value="2">005</option>
    <option value="3">003</option>
</select>

<select id="fname">
    <option value="1">James</option>
    <option value="2">Jane</option>
    <option value="3">John</option>
</select>

本人尝试的代码（未成功） #

$('#regnum').click(function () {
    $('#regnum option:selected').each(function () {
        console.log($(this).val());    
        var vregnum = $(this).val();
        $("#fname option[$vregnum]").attr('selected', true); 
    });
});

解决方案 #

你的代码存在几个问题：

1. 下拉框的选择事件应该用change而非click，click会在点击下拉框本身时就触发，并非选中选项后才触发。
2. 选择器写法错误：$("#fname option[$vregnum]")不符合jQuery选择器规则，正确的value选择器格式是$("#fname option[value='"+vregnum+"']")。
3. 下拉框仅能选中一个选项，无需用each循环遍历选中项。
4. 只处理了regnum到fname的单向联动，未覆盖反向联动逻辑。

以下是修正后的双向联动代码：

// 绑定regnum的选项变更事件
$('#regnum').on('change', function() {
    var selectedUid = $(this).val();
    // 直接设置fname的选中值
    $('#fname').val(selectedUid);
});

// 绑定fname的选项变更事件
$('#fname').on('change', function() {
    var selectedUid = $(this).val();
    // 直接设置regnum的选中值
    $('#regnum').val(selectedUid);
});

代码说明 #

• 使用change事件监听下拉框的选项变更，仅在用户选中新选项时触发。
• jQuery的val()方法可直接设置下拉框的选中值，无需手动查找option再修改selected属性，更简洁高效。
• 双向绑定两个下拉框的change事件，实现任意一方变更时另一方同步选中对应选项。

内容的提问来源于stack exchange，提问作者technofreaks