Creating two dependent Dropdown List

Question

I want to make the third drop down populated based on selection on second drop down refer value from first and second drop down.

jQuery

<script type="text/javascript">
$(document).ready(function() {

$("#parent_cat").change(function() {
    $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
        $("#sub_cat").html(data);
    }); 
});

$("#sub_cat").change(function() {
    $.get('loadsubelement.php?sub_cat=' + $(this).val() + $('#parent_cat').val(), function(data) {
        $("#select_subelement").html(data);
    }); 
});
});
</script>

loadsubelement.php

<?php 
include('config.php');
$parent_cat = $_GET['parent_cat'];
$sub_cat = $_GET['sub_cat'];
$query = mysqli_query($connection, "SELECT * FROM maincategories WHERE categoryID = {$parent_cat}");
$query = mysqli_query($connection, "SELECT * FROM maincategories WHERE subcategoryID = {$sub_cat}");
echo '<option value="">Please select</option>';
while($row = mysqli_fetch_array($query)) {
echo '<option value="'.$row['subcategoryID'].'">' . $row['maincategory_name'] . "</option>";
}
?>

i can make that work with text file am generating value from txt file — sanoj lawrence, Jan 04 '15 at 09:57

Jai · Accepted Answer · 2015-01-04T10:39:28.277

0

I think you have to change your query string like this:

$.get('loadsubelement.php?sub_cat=' + $(this).val() + 
                          "&parent_cat" + $('#parent_cat').val()

You are missing this: "&parent_cat" in your second ajax call.

Or a better way of doing is to send the an object like this:

$("#sub_cat").change(function() {
   var dataString = { 
                 parent_cat : $('#parent_cat').val(),
                 sub_cat : $(this).val()
              };
   if($('#parent_cat').val() !== ""){ // check if value is selected or not i guessed default value as "".
        alert("Please choose the parent value.");
        $('#parent_cat').focus(); // apply focus on the element.
        return false;
   }else{
        $.get('loadsubelement.php', dataString, function(data) {
           $("#select_subelement").html(data);
        });
   } 
});

edited Jan 04 '15 at 10:39

answered Jan 04 '15 at 10:02

Jai

74,255
12
74
103

It's work third drop down it show options,but how can i check first/second drop down value for third drop down? – ekalostz Jan 04 '15 at 10:10
@ekalostz you meant if first/second dropdown values are there or not, like some validation before showing the options for third one. – Jai Jan 04 '15 at 10:35
yes, script in loadsubelement.php how can i check it? – ekalostz Jan 04 '15 at 11:25

score 0 · Answer 2 · answered Jan 04 '15 at 10:15

jQuery(function($) {
jQuery("#office_id").change(function(){
var inputString=jQuery("#office_id").val();
$.post("?r=reports/summary/loademployees/", {office_id: ""+inputString+""}, function(data){
                    $('#employee_id').fadeIn();
                    $('#employee_id').html(data);
                }
            });
});
});

This is a program triggers when when u change a dropdown containing offices having id as office_id and load employees (another dropdown box having id employee_id) of that office.

Creating two dependent Dropdown List

2 Answers2