使用php和onselection更改另一个动态Combobox的值来创建动态Combobox [英] Create Dynamic Combobox using php and onselection change values of another dynamic Combobox

问题描述

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

 类别名称
机场ABC 
机场XYZ 
学院a1 
学院b1 
学院b2 
 busstop a 
 busstop b 
 busstop c 
 busstop d 
  

所以，第一个Combobox将包含唯一类别列表（如：Airport，College，busStop）
，并在此选择的基础上启用第二个组合框相关值，如用户选择机场，然后第二个组合框将只包含（ABC，XYZ）。

我基本上只想使用HTML，JAVASCRIPT和PHP。

任何建议。 。

解决方案

使用下面的代码段，我假设你有一个数组填充你的数据库行作为对象， $ results;

编辑：如何获取查询对象：
http://www.php.net/manual/en/mysqli-result.fetch-object.php

我开始收集用于创建组合框的数据：

  $ combobox_data = array（）; 
 
 $ results = mysqli_query（SELECT * FROM TABLE）; 
 //创建一个包含每个类别名称的多维数组
 while（$ row = mysqli_fetch_object（$ results））{
 $ combobox_data [$ row-> Category] ​​[] = $ row - >姓名; 
} 
 
 
 
 $ category_combobox_html =; 
 $ name_combo_boxes_html =; 
 //创建类别combo_box 
 foreach（$ combobox_data as $ category => $ names）{
 
 //将类别选项添加到类别组合框
 $ category_combobox_html。='< option value ='。$ category。'>'。$ category。'< / option>'; 
 
 //为此类别创建名称组合框
 $ name_combo_boxes_html。='< select id ='。$ category。'name ='。$ category。' class =hidden_​​combobox>'; 
 
 //循环名称，为此类别的组合框中添加名称
 foreach（$ names as $ name）{
 $ name_combo_boxes_html。='< option value ='。$ name。'>'。$ name。'< / option>'; 
} 
 //结束这个类别的组合框
 $ name_combo_boxes_html。='< / select>'; 
} 
  

您的css

 < style type =text / cssmedia =screen> 
 .hidden_​​combobox {
 display：none; 
} 
< / style> 
  

您的HTML

 < select name =categoriesid =categories> 
<？php echo $ category_combobox_html; ？> 
< / select> 
 
 
<？php echo name_combo_boxes_html;？> 
  

您的javascript

 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script> ; 
< script type =text / javascript> 
 
 //从类别框中选择
 $（＃categories）。change（function（）{
 
 //获取所选类别
 var selectedValue = $（this）.find（：selected）。val（）; 
 
 //隐藏所有的名字框
 $ （）{
 $（this）.hide（）; 
}）; 
 
 //为此选择显示combobox select 
 $（'＃'+ selectedValue） .show（）; 
}）; 
< / script> 
  

您的结果将是： / p>

除非您选择与combo_box相匹配的类别，否则所有名称组合框都将被隐藏

 < select name =categoriesid =categories> 
< option value =Airport>机场< / option> 
< option value =College> College< / option> 
< option value =busstop> busstop< / option> 
< / select> 
 
< select id =Airportname =Airportclass =namesbox hidden_​​combobox> 
< option value =ABC> ABC< / option> 
< option value =XYZ> XYZ< / option> 
< / select> 
< select id =Collegename =Collegeclass =namesbox hidden_​​combobox> 
< option value =a1> a1< / option> 
< option value =b1> b1< / option> 
< option value =b2> b2< / option> 
< / select> 
< select id =busstopname =busstopclass =namesbox hidden_​​combobox> 
< option value =a> a< / option> 
< option value =b> b< / option> 
< option value =c> c< / option> 
< option value =d> d< / option> 
< / select> 
  

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

解决方案

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>

这篇关于使用php和onselection更改另一个动态Combobox的值来创建动态Combobox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！