javascript 使用 php 和 onselection 更改另一个动态组合框的值创建动态组合框

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

提问by apaleja

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 :

我想创建 HTML 动态组合框，它使用来自 db 的 php 脚本和另一个动态组合框的 onselection 更改值填充。最初第二个组合框应该是不可见的，并且在选择第一个组合框时使第二个组合框与类似数据相关联。例如，我有这张表：

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

因此，第一个组合框将包含唯一类别列表（如：机场、大学、巴士站），并在此选择的基础上启用具有相关值的第二个组合框，例如如果用户选择了机场，则第二个组合框将仅包含（ABC、XYZ）。

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

我基本上只想用 HTML、JAVASCRIPT 和 PHP 来做到这一点。

any suggestions are appreciated..

任何建议表示赞赏..

回答by Timmetje

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

使用以下代码片段，我假设您有一个数组，其中填充了您的数据库行作为对象，我将其命名为 $results;

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

编辑：如何获取查询对象：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

你的CSS

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

your html

你的 html

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


<?php echo name_combo_boxes_html ;?>

your javascript

你的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

除非您选择与 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>

回答by Robert

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

你试过谷歌吗？看来你正在寻找的东西像这样。