CODEWITHSUNDEEP
javascriptajaxasp.net-mvcdrop-down-menu
Armaan Labib
Armaan Labib

Reputation: 165

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

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.

Upvotes: 0

Views: 1444

Answers (2)

Asif Raza
Asif Raza

Reputation: 1021

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)

Upvotes: 2

Lalit
Lalit

Reputation: 1369

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>

Upvotes: 0

Related Questions