Create Dynamic Combobox using php and onselection change values of another dynamic Combobox

Question

I want to Create HTML Dynamic Combobox which populate using php scripting from db and onselection change values of another dynamic Combobox. Initially 2nd combobox should be invisible and on selection of 1st combobox make 2nd combobox visible related with similar data. for example, I have this table :

    Category Name
    Airport  ABC
    Airport  XYZ
    College  a1
    College  b1
    College  b2
    busstop  a
    busstop  b
    busstop  c
    busstop  d

So, 1st Combobox will contain Unique Category listing (like: Airport, College, busStop) and on the base of this selection enable 2nd combobox with related values like if user selected Airport then 2nd combobox will contain only (ABC, XYZ).

I basically want to do this with only HTML,JAVASCRIPT AND PHP only.

any suggestions are appreciated..

Answer 1

With the following snippet I make the assumption you have an array filled with your database rows as objects, which I will name $results;

edit: How to get your query objects: http://www.php.net/manual/en/mysqli-result.fetch-object.php

I start with gathering the data for creating the comboboxes:

$combobox_data = array();

$results = mysqli_query("SELECT * FROM TABLE");
//create a multi dimensional array with names per category
while($row = mysqli_fetch_object($results)){
    $combobox_data[$row->Category][] = $row->Name;
}



$category_combobox_html = "";
$name_combo_boxes_html = "";
//create category combo_box
foreach($combobox_data as $category=>$names){

    //Add category option to  category combo-box
    $category_combobox_html .= '<option value="'.$category.'">'.$category.'</option>';

    //Create Names combo-box for this category
    $name_combo_boxes_html .= '<select id="'.$category.'" name="'.$category.'" class="hidden_combobox">';

    //loop names, to add Names in the combo-box for this category
    foreach($names as $name){
        $name_combo_boxes_html .= '<option value="'.$name.'">'.$name.'</option>';
    }
    //end your combo box for this category
    $name_combo_boxes_html .= '</select>';
}

your css

<style type="text/css" media="screen">
    .hidden_combobox{
        display:none;
    }
</style>

your html

<select name="categories" id="categories">
<?php echo $category_combobox_html; ?> 
</select>


<?php echo name_combo_boxes_html ;?>

your javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

    //when you select something from category box
    $("#categories").change(function(){

        //get selected category
        var selectedValue = $(this).find(":selected").val();

        //hide all nameboxes
        $('.namebox').each(function(){
           $(this).hide();
        });

        //show combobox for this select
        $('#'+selectedValue).show();
    });
</script>

Your result will be this:

All name comboboxes will be hidden unless you select a category which matches the combo_box

<select name="categories" id="categories">
    <option value="Airport">Airport</option>
    <option value="College">College</option>
    <option value="busstop">busstop</option>
</select>

<select id="Airport" name="Airport" class="namesbox hidden_combobox">
    <option value="ABC">ABC</option>
    <option value="XYZ">XYZ</option>
</select>
<select id="College" name="College" class="namesbox hidden_combobox">
    <option value="a1">a1</option>
    <option value="b1">b1</option>
    <option value="b2">b2</option>
</select>
<select id="busstop" name="busstop" class="namesbox hidden_combobox">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>

Answer 2

Have you tried Google-ing it? It seems that you're looking for something like this.