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

Here is a basic example with what you want. Test it and come back if you have problems implementing this. — Ovidiu
– Ovidiu, Commented Jul 12, 2012 at 11:54
plus2net.com/php_tutorial/ajax_drop_down_list.php - sorry :) — Ovidiu
– Ovidiu, Commented Jul 12, 2012 at 12:38
@ovidiu, its very nice example but with ajax. I do not want to use ajax. if you have any other example then it really will be useful.. please let me know. Thanks .. — apaleja
– apaleja, Commented Jul 12, 2012 at 13:06
I don't have an example without ajax. But to do it without, you need to submit the selection from first dropdown, pass it as a get/post then on reload fill the second one based on passed value. No need for javascript then. — Ovidiu
– Ovidiu, Commented Jul 12, 2012 at 13:22

Timmetje · Accepted Answer · 2012-07-17 14:08:00Z

5

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>

edited Jul 17, 2012 at 14:08

answered Jul 12, 2012 at 13:04

Timmetje

7,70521 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

apaleja Over a year ago

great timmied, this is what I was looking for. Will try it and let you know. Thanks ..

apaleja Over a year ago

how can i retrieve data as Object as you said in beginning, i tried alot but can not make this coded working .. (of cause problem at myside not able to gibe proper input at foreach($result). . )

Timmetje Over a year ago

You can also use $result = mysqli_query({your query}) and while($row = mysqli_fetch_object($result)){}. This way in your while loop $row is the row you are currently looping. and you can access $row->Name and $row->Category (I will add it to the snippet)

Robert · Accepted Answer · 2012-07-12 11:55:15Z

-1

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

answered Jul 12, 2012 at 11:55

Robert

1,9051 gold badge17 silver badges24 bronze badges

5 Comments

Timmetje Over a year ago

Depends if he wants to fill the content with AJAX, from a WCAG perspective it seems better to load all content with PHP and do the funny stuff with JS. I agree on the simplicity though, lot of examples on google.

apaleja Over a year ago

Thanks robert, its very nice example. but as I mentioned in my Question, I want to implement it using HTML, PHP and JAVASCRIPT only. .. if you can give me some example for this, it would be very much helpful to me.

Robert Over a year ago

This example uses jQuery which is JAVASCRIPT (in the form of a framework)! As for "if you can give me some example for this, it would be very much helpful to me"... Are you asking me to google it for you?

apaleja Over a year ago

no Robert, Thank you very much for your answer. I really appreciate it. I can see the JAVASCRIPT Usage as Framework but i want something else which I am not able to find so posted Question here. and yes of course I am not asking you to GOOGLE FOR ME. its just , if you have answer then you can give. Thanks ..

Timmetje Over a year ago

I made a snippet for you to test with, javascript, php and html only. A bit of css though ;)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related