我想创建HTML动态组合框,该组合框使用php脚本从数据库填充,并更改另一个动态组合框的值。最初,第二个组合框应该是不可见的,在选择第一个组合框时,使第二个可见组合框与类似数据相关。例如,我有这个表:
Category Name
Airport ABC
Airport XYZ
College a1
College b1
College b2
busstop a
busstop b
busstop c
busstop d
因此,第一个组合框将包含唯一类别列表(如:机场、学院、公共汽车站)并且在此选择的基础上启用具有相关值的第二组合框,例如如果用户选择了Airport,则第二组合栏将仅包含(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");
//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>';
}
您的css
<style type="text/css" media="screen">
.hidden_combobox{
display:none;
}
</style>
您的html
<select name="categories" id="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">
//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>
您的结果将是:
所有名称组合框都将被隐藏,除非您选择了与组合框匹配的类别
<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>
你试过用谷歌搜索吗?你好像在找这样的东西。