如何更改更改事件下拉列表的值？

Question

我有两个来自同一张表的下拉列表。一个包含员工代码，第二个包含员工姓名。如果我更改员工代码，则其他下拉菜单应显示与代码相关的员工姓名，如果我更改员工姓名，则应显示代码。我能够成功检索值，但无法在下拉列表中显示值。以下是我的代码：

$("select#code").on("change", function () {
         getNameFunc($(this).val())
});

$("select#empName").on("change", function () {
         getCodeFunc($(this).val())
});

function getNameFunc(value) {
   $.ajax({
        url: '@Url.Action("getName", "Employees")',
        data: { id: value },
        cache: false,
        type: "GET",
        success: function (data) {
               $("#empName").val(data.Name);
        }
    });
}

function getCodeFunc(value) {
     $.ajax({
          url: '@Url.Action("getCode", "Employees")',
          data: { id: value },
          cache: false,
          type: "GET",
          success: function (data) {
               $("#code").val(data.Code);
          }
    });
}

我的下拉列表：

@Html.DropDownList("EmpCode", null, htmlAttributes: new { id = "code" })
@Html.DropDownList("EmpName", null, htmlAttributes: new { id = "empName" })

在警报功能中，我得到了预期值，但问题是在下拉列表中显示它。

Answer 1

简单，试试吧，让我假设选择渲染为，这是虚拟测试，最好的方法是你必须保存 value = EmpID

企业名称下拉菜单

<select id="name">
<option value="EmpID1"> Name 1 </option>
<option value="EmpID2"> Name 2 </option>
</select>

Emp 代码下拉菜单

<select id="code">
 <option value="EmpID1"> Code 1 </option>
 <option value="EmpID2"> Code 2 </option>
 </select>

在您的 ajax 中，如果您想更改/加载下拉列表前面的名称，那么

按值设置的值

  $('#name').val(data.EmpID1)

Similarly reverse

$('#code').val(data.EmpID1)

由文本/名称设置的值

$('#name option:selected').text(data.Name)

Answer 2

检查此代码。你可能会从中得到帮助。 请注意，我没有在这段代码中实现 ajax 调用。

$("#emp_code").on("change",function(){
    $("#emp_name").val($("#emp_code").val());
});

$("#emp_name").on("change",function(){
    $("#emp_code").val($("#emp_name").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Emp Code:</label>
<select id="emp_code">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br/>
<label>Emp Name:</label>
<select id="emp_name">
  <option value="1">ABC</option>
  <option value="2">XYZ</option>
  <option value="3">PQR</option>
  <option value="4">JKL</option>
</select>