Populate Dropdown by Selected Dropdown
1 posts by 1 authors in: Forums > CMS Builder
Last Post: May 14, 2018 (RSS)
By depdesign - May 14, 2018
I have code, using ajax, that was created by Interactive Tools that would populate a secondary dropdown if it related to a selection in the first dropdown, similar to a select country > state > city etc.
The code works great until now where I need a third dropdown to appear if it relates to the secondary dropdown. For example section > category > subcategory
I'm pretty close to accomplishing this but I can't get the third dropdown to appear after selecting the secondary populated dropdown based on the first selected dropdown. Below is the code I have modified.
I would greatly appreciate it If you could take a look at the code below and let me know what am I missing to make the ajax reload the page to show the third related dropdown.
<?php
//Get the viewer functions.
include_once 'cmsb/lib/viewer_functions.php';
if($CURRENT_USER){
$sections = mysql_select('sections', mysql_escapef("`createdByUserNum` = ? AND mail = ? AND contact = ? AND hide_in_tab = ? AND hide = ?", $CURRENT_USER['num'],0,0,0,0));
$where = "TRUE ";
if(isset($_REQUEST['sections'])){
$categories = mysql_select('categories', mysql_escapef("`section` = ? AND hide = ?", $_REQUEST['sections'],0));
if(isset($_REQUEST['get_section_ajax'])) { //If we're loading the system via AJAX,
displayCategories($categories);
exit;
}
}
if(isset($_REQUEST['categories'])){
$subcategories = mysql_select('subcategories', mysql_escapef("`category` = ? ", $_REQUEST['categories']));
if(isset($_REQUEST['get_section_sub_ajax'])) { //If we're loading the system via AJAX,
displaySubCategories($subcategories);
exit;
}
}
}
//This function contains the code that displays the category menu.
function displayCategories($categories) {
?>
<?php if($categories): ?>
<label for="categories">Categories</label>
<select id="categoriesselect" name="categories">
<option value="" >Please Select</option>
<?php foreach($categories as $category): ?>
<option <?php selectedIf(@$_REQUEST['categories'], $category['num']); ?> value="<?php echo htmlEncode($category['num']); ?>" ><?php echo htmlEncode($category['title']); ?></option>
<?php endforeach; ?>
</select><br>
<?php endif; ?>
<?php
}
//This function contains the code that displays the subcategory menu.
function displaySubCategories($subcategories) {
?>
<?php if($subcategories): ?>
<label for="subcategories">SubCategories</label>
<select id="subcategoriesselect" name="subcategories">
<option value="" >Please Select</option>
<?php foreach($subcategories as $subcategory): ?>
<option <?php selectedIf(@$_REQUEST['subcategories'], $subcategory['num']); ?> value="<?php echo htmlEncode($subcategory['num']); ?>" ><?php echo htmlEncode($subcategory['title']); ?></option>
<?php endforeach; ?>
</select><br>
<?php endif; ?>
<?php
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="">
<?php if($CURRENT_USER): ?>
<label for="sections">Sections</label>
<?php if($sections): ?>
<select id="sectionsselect" name="sections">
<option value="" >Please Select</option>
<?php foreach($sections as $section): ?>
<option <?php selectedIf(@$_REQUEST['sections'], $section['num']); ?> value="<?php echo htmlEncode($section['num']); ?>" ><?php echo htmlEncode($section['title']); ?></option>
<?php endforeach; ?>
</select><br>
<?php else: ?>
<p>There aren't any sections for this account.</p>
<?php endif; ?>
<!-- This div will load the content of the category drop down via ajax -->
<div id="category_containerselect">
<?php if(isset($_REQUEST['sections'])) { displayCategories($categories); } ?>
</div>
<div id="subcategory_containerselect">
<?php if(isset($_REQUEST['categories'])) { displaySubCategories($subcategories); } ?>
</div>
<input type="submit" name="go" value="Go" />
<?php else: ?>
<p>You must be logged in to use this dropdown.</p>
<?php endif; ?>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#sectionsselect').change(function(){
var sections = $(this).val();
var categories = $('#categoriesselect').val();
$.get( "?get_section_ajax=1§ions=" + sections + "&categories=" + categories, function( data ) {
$( "#category_containerselect" ).html( data );
});
});
});
$(document).ready(function() {
$('#categoriesselect').change(function(){
var categories = $(this).val();
var subcategories = $('#subcategoriesselect').val();
$.get( "?get_section_sub_ajax=1&categories=" + categories + "&subcategories=" + subcategories, function( data ) {
$( "#subcategory_containerselect" ).html( data );
});
});
});
</script>
</html>