如何实现两个select下拉选择框的联动更新功能？附现有代码

咱们先聊聊你现有代码里的核心问题：你的第二个下拉框的option值是20、30、40，但你的JS里是把第一个下拉框选中项的索引（0、1、2）赋值给第二个下拉框的val()，这俩值完全不匹配，所以联动肯定失效啦。接下来我给你修正代码，实现正确的联动：

修正后的HTML代码 #

首先把第二个label上多余的onChange去掉，同时修正ValidationMessage的绑定（应该对应第二个字段）：

<div class="form-group"> 
    @Html.LabelFor(model => model.descripcion, new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
        <div class="form-inline md-form mr-auto"> 
            <select class="form-control" id="descripcion" name="descripcion" onchange="GetChange(this);"> 
                <option>Texto 1</option> 
                <option>Texto 2</option> 
                <option>Texto 3</option> 
            </select> 
            @Html.ValidationMessageFor(model => model.descripcion) 
        </div> 
    </div> 
</div> 
<div class="form-group"> 
    @Html.LabelFor(model => model.descripcionx, new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
        <div class="form-inline md-form mr-auto"> 
            <select class="form-control" id="descripcionx" name="descripcionx"> 
                <option value="20">Texto 1</option> 
                <option value="30">Texto 2</option> 
                <option value="40">Texto 3</option> 
            </select> 
            @Html.ValidationMessageFor(model => model.descripcionx) 
        </div> 
    </div> 
</div>

修正后的JavaScript函数 #

这里有两种可靠的实现方式，你可以选适合你的：

方式一：通过文本内容匹配（推荐，容错性高） #

这种方式是根据第一个下拉框选中的文本，去第二个下拉框里找到对应文本的option并选中，不需要依赖索引或value的对应关系：

function GetChange(ctr) {
    // 获取第一个下拉框选中的文本
    const selectedText = $(ctr).find("option:selected").text();
    // 在第二个下拉框中找到文本匹配的option，设置为选中状态
    $("#descripcionx").find(`option:contains('${selectedText}')`).prop("selected", true);
}

方式二：通过索引对应（如果两个下拉框的选项顺序完全一致） #

如果你确定两个下拉框的选项顺序永远一一对应，也可以用索引来设置，但要注意是设置第二个下拉框的索引，而不是val：

function GetChange(ctr) {
    // 获取第一个下拉框选中项的索引
    const selectedIndex = $(ctr)[0].selectedIndex;
    // 直接设置第二个下拉框的选中索引
    $("#descripcionx")[0].selectedIndex = selectedIndex;
}

额外优化建议 #

• 把JS事件绑定从HTML的onchange移到JS代码里，更符合Unobtrusive JavaScript的规范，代码更整洁：

$(document).ready(function() {
    $("#descripcion").on("change", function() {
        const selectedText = $(this).find("option:selected").text();
        $("#descripcionx").find(`option:contains('${selectedText}')`).prop("selected", true);
    });
});

这样HTML里就不需要写onchange="GetChange(this);"了。

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