Dynamic Dropdowns Made Simple: Update Child Menus Using jQuery Ajax

Dynamically Loading Child Dropdowns Using Parent Dropdown Selection

Efficient management of dropdown menus is a common requirement in web development, especially when creating dynamic forms. This blog explores a simple and scalable approach to dynamically loading child dropdowns based on the selected option in parent dropdowns using a single jQuery Ajax function.

Key Highlights of the Method

1. Unified Ajax Call: A single Ajax function handles multiple dropdown relationships, reducing repetitive code.
2. Dynamic Data Preparation: Based on the parent dropdown's ID, relevant data is passed to the server to fetch the required child dropdown options.
3. Enhanced User Experience: Child dropdown options update instantly, ensuring responsiveness and interactivity.

The JavaScript Solution
Below is the JavaScript code using jQuery for dynamically updating child dropdowns:

$(document).ready(function () {

  // Unified Ajax Call for Dropdown Updates

  $('.rnscall').on('change', function () {

    var val = $(this).find('option:selected').val();

    var rnsid = this.id;

    if (rnsid == "proj_city_id") {

      var dataString = 'city_id=' + val + '&drop=loc';

      var rnsresult = "#proj_loc_id";

    } else if (rnsid == "proj_type") {

      var dataString = 'type_id=' + val + '&drop=subtype';

      var rnsresult = "#proj_subtype";

    }

    $.ajax({

      type: "POST",

      url: "ajax.php",

      data: dataString,

      cache: false,

      success: function (data) {

        $(rnsresult).html(data);

      }

    });

  });

});

HTML Structure
The following HTML structure integrates parent and child dropdowns seamlessly:

<div class="row">

  <span class="label">Type <span class="red">*</span></span>

  <span class="item">

<select name="proj_type" id="proj_type" class="rnscall" style="width: 310px" required>

<?php call_user_func_array('rns_drop_foreach', array($proptype_arr, @$row['proj_type'], "Type")); ?>

</select>

</span>

  <div class="clear"></div>

</div>

<div class="row">

  <span class="label">Sub Type <span class="red">*</span></span>

  <span class="item">

<select name="proj_subtype" id="proj_subtype" style="width: 310px" required>

<option value="">Select Sub Type</option>

<?php if (!empty($_GET['id'])) {

call_user_func_array('dropdown', array('si_property_type', 'pt_id,pt_name', 'pt_status=1 order by pt_name', @$row['proj_subtype']));

} ?>

</select>

</span>

  <div class="clear"></div>

</div>

<div class="row">

  <span class="label">City <span class="red">*</span></span>

  <span class="item">

<select name="proj_city_id" id="proj_city_id" class="rnscall" placeholder="City Name" style="width: 310px" required>

<option value="">Select City Name</option>

<?php dropdown('si_cities', 'city_id,city_name', 'city_status=1 order by city_name', @$row['proj_city_id']); ?>

</select>

</span>

  <div class="clear"></div>

</div>

<div class="row">

  <span class="label">Location <span class="red">*</span></span>

  <span class="item">

<select name="proj_loc_id" id="proj_loc_id" placeholder="Designation" style="width: 310px" required>

<option value="">Select Location</option>

<?php if (!empty($_GET['id'])) {

dropdown('si_locations', 'loc_id,loc_name', 'loc_status=1 order by loc_name', @$row['proj_loc_id']);

} ?>

</select>

</span>

  <div class="clear"></div>

</div>

Benefits of This Approach

1. Efficiency: Eliminates the need for separate functions for each dropdown pair, reducing code duplication.
2. Scalability: Easily extendable to additional dropdown pairs or complex data structures.
3. User-Friendly: Provides an intuitive interface with real-time updates, enhancing overall user experience.

Conclusion
This method simplifies the dynamic handling of dropdown menus using a single jQuery Ajax call. Whether you're developing a registration form or building an advanced application, this approach ensures scalability and efficiency.