Create Dynamic Combobox Using Php And Onselection Change Values Of Another Dynamic Combobox
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 invisi
Solution 1:
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>
Post a Comment for "Create Dynamic Combobox Using Php And Onselection Change Values Of Another Dynamic Combobox"