Home » Jquery » jquery – The second change event of nested dropdown lists is not fired

jquery – The second change event of nested dropdown lists is not fired

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have one dropdown list with company names. A change() is placed on the select tag of that list.

When the user chooses a company, I am doing an Ajax call to get the potential departments linked to the chosen company. If departments are found, they are displayed in a second dropdown list.

I need a change() on that list too but it doesn’t work and I don’t understand why.

I verified with a simple example that nested change events were ok and it works fine : https://www.w3schools.com/code/tryit.asp?filename=GC3YFDYYSTVA

But on my project something prevents the second event from working. If Ajax returns result, the second dropdown is inserted back to the DOM so it should work.

Btw when I copy paste the second change() in the console and use the dropdown, the event is fired..

Any ideas?

HTML

     @*DropDown List for company*@
     <div class="form-group" id="setCompanyId">
        <label asp-for="Id" class="control-label"></label>
          <select name="Id" asp-items="Model.Options" id="Id">
               <option value="">Sélectionnez une société</option>
               <option value="0">Autre</option>
          </select>
     </div>

     @*DropDown List for department*@
     <div class="form-group" id="setCompanyDepartment">
        <label asp-for="DepartmentId" class="control-label"></label>
          <select name="DepartmentId" id="DepartmentId">
               <option value="">Sélectionnez un département</option>
               <option value="0">Autre</option>
          </select>
     </div>

JS

$(document).ready(function () {
  let department = $("#setCompanyDepartment");
  let departmentChildren = $("#DepartmentId").html();

  // Store the Id value of the selected company item
     let dropdwId = $("select#Id");
     let id = dropdwId.val();

  // Store the Id value of the selected department item
     let dropdwDepartmentId = $("select#DepartmentId");

  // When a selection is made by the user in the company dropdownlist
     $("#Id").change(function () {

        // Modify the Id value of the selected item
        id = dropdwId.val();
        departmentId = dropdwDepartmentId.val();

        // If the user selects a company the corresponding departments are displayed by Ajax request
          if (id > "0") {
           $.ajax({
              url: "/Register/GetDepartmentsByCompany",
              data: { companyId: id },
              type: "GET",
              success: function (result) {
                 $.each(result, function (index, row) {
                   if (result != null) {
                    $("#setCompanyId").after(department);
                    $("#DepartmentId").empty();
                    $("#DepartmentId").append(departmentChildren);
                    $("#DepartmentId").append("<option value='" + row.id + "'>" + row.name + "</option>");
                    }
                 });
              },
              dataType: "json",
             });

          $("select#DepartmentId").change(function () {
               console.log("ok");
          });
       }

How to&Answer: