Create Dynamic Combobox Using Php And Onselection Change Values Of Another Dynamic Combobox

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 invisi

Solution 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 categorywhile($row = mysqli_fetch_object($results)){
    $combobox_data[$row->Category][] = $row->Name;
}



$category_combobox_html = "";
$name_combo_boxes_html = "";
//create category combo_boxforeach($combobox_dataas$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 categoryforeach($namesas$name){
        $name_combo_boxes_html .= '<option value="'.$name.'">'.$name.'</option>';
    }
    //end your combo box for this category$name_combo_boxes_html .= '</select>';
}

your css

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

your html

<selectname="categories"id="categories"><?phpecho$category_combobox_html; ?></select><?phpecho name_combo_boxes_html ;?>

your javascript

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scripttype="text/javascript">//when you select something from category box
    $("#categories").change(function(){

        //get selected categoryvar 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

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

Solution 2:

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