javascript - Create Dynamic Combobox using php and onselection change values of another dynamic Combobox - Stack Overflow

admin管理员组

文章数量:1318572

I want to Create HTML Dynamic Combobox which populate using php scripting from db and onselection change values of another dynamic Combobox. Initially 2nd bobox should be invisible and on selection of 1st bobox make 2nd bobox 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 bobox with related values like if user selected Airport then 2nd bobox will contain only (ABC, XYZ).

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

any suggestions are appreciated..

I want to Create HTML Dynamic Combobox which populate using php scripting from db and onselection change values of another dynamic Combobox. Initially 2nd bobox should be invisible and on selection of 1st bobox make 2nd bobox 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 bobox with related values like if user selected Airport then 2nd bobox will contain only (ABC, XYZ).

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

any suggestions are appreciated..

• php
• javascript
• html
• bobox

Share Improve this question Follow asked Jul 12, 2012 at 11:47 apalejaapaleja 40544 gold badges1010 silver badges2121 bronze badges 5

• Here is a basic example with what you want. Test it and e back if you have problems implementing this. – Ovidiu Commented Jul 12, 2012 at 11:54
• Hi ovidiu, I think you forgot to give some link .. – apaleja Commented Jul 12, 2012 at 12:33
• plus2net./php_tutorial/ajax_drop_down_list.php - sorry :) – 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 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 Commented Jul 12, 2012 at 13:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/manual/en/mysqli-result.fetch-object.php

I start with gathering the data for creating the boboxes:

$bobox_data = array();

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



$category_bobox_html = "";
$name_bo_boxes_html = "";
//create category bo_box
foreach($bobox_data as $category=>$names){

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

    //Create Names bo-box for this category
    $name_bo_boxes_html .= '<select id="'.$category.'" name="'.$category.'" class="hidden_bobox">';

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

your css

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

your html

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


<?php echo name_bo_boxes_html ;?>

your javascript

<script src="http://ajax.googleapis./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 bobox for this select
        $('#'+selectedValue).show();
    });
</script>

Your result will be this:

All name boboxes will be hidden unless you select a category which matches the bo_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_bobox">
    <option value="ABC">ABC</option>
    <option value="XYZ">XYZ</option>
</select>
<select id="College" name="College" class="namesbox hidden_bobox">
    <option value="a1">a1</option>
    <option value="b1">b1</option>
    <option value="b2">b2</option>
</select>
<select id="busstop" name="busstop" class="namesbox hidden_bobox">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>

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

本文标签：