How to change the value of the drop-down on change event?

Question

I have two drop-down lists which are from same table. One contains employee code and second one contains employee name. If I change the employee code then other drop-down should show the employee name relevant to code and if I change the employee name then it should show the code. I am able to successfully retrieve the values but I am unable to show value in the drop-down. Following is my code:

$("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);
          }
    });
}

My drop-down list:

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

In alert function, I am getting expected value but the problem is displaying it in to drop-down list.

Answer 1

Simple , Try it , Let me assume selects render as , this is dummy test , best approch you must save value = EmpID

Emp Name dropdown

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

Emp Code dropdown

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

Inside your ajax , if you want change/load name front the of the dropdown then

Value set by value

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

Similarly reverse

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

Value set by text / name

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

Answer 2

Check this code. You might get help from this. Note that I have not implemented ajax call in this code.

 $("#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>