Skip to main content

Using single jQuery Ajax function/Call to load child dropdown based on Parent dropdown selction instead of multiple functions

Using single jQuery Ajax function/Call to load child drop down based on Parent drop down selection instead of multiple functions.

<script type="text/javascript">
$(document).ready( function() {
   
    // All in On RNS Ajax Call
    $('.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);
            }
        });
    });
});
</script>


<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>

Comments