Dynamic dropdowns using jQuery and PHP

I've reviewed the article by Julian Hansen detailing how to create linked dropdowns using JQuery and PHP. However, how would I go about this if I have the data stored in different folders located on a server?

Ex. Main Folder > Sub Folder > 3rd folder > Document

1st Dropdown list will provide a list of states (list extracted from Main Folder)

2nd Dropdown list will provide a list of cities (list extracted from Subfolder, dependent on 1st dropdown selection)

3rd Dropdown list will provide a list of counties (list extracted from 3rd folder, dependent on 2nd dropdown selection)

4th dropdown list will provide a list of word/excel/pdf documents (list extracted from document, list is dependent on 3rd dropdown selection)

The form should display as a popup form, with submit and clear buttons.

Test.html
Untitled-3.php
Untitled-2.js
T SmithAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
The sample will need to change a bit. I put together another sample to demonstrate.

HTML
	Root <select name="root" id="root"></select>
	Sub1 <select name="sub1" id="sub1"></select>
	Sub2 <select name="sub2" id="sub2"></select>

Open in new window

jQuery
<script>
$(function() {
	var root = document.getElementById('root');
	var sub1 = document.getElementById('sub1');
	var sub2 = document.getElementById('sub2');
	loadDD(root, false, false);
	
	$('select').change(function() {
		if (this.id == 'root') {
			sub1.value = sub2.value = '';
			loadDD(root, sub1, false)
		}
		else if (this.id == 'sub1') {
			sub2.value = '';
			loadDD(root, sub1, sub2);
		}
	});
});
function loadDD(root, sub1, sub2)
{
	$.ajax({
		url: 't2884.php',
		data: {
			root: root.value || '',
			sub1: sub1.value || ''
		}
	}).then(function(resp) {
		if (root.value) {
			if (sub1.value) {
				sub2.innerHTML = resp;
			}
			else {
				sub1.innerHTML = resp;
			}
		}
		else {
			root.innerHTML = resp;
		}
	});
}
</script>

Open in new window

PHP
<?php
$path = 't2884/';

$root = isset($_GET['root']) ? $_GET['root'] : false;
$sub1 = isset($_GET['sub1']) ? $_GET['sub1'] : false;

if ($root) $path .= "{$root}/";
if ($sub1) $path .= "{$sub1}/";
$path .= '*';

$dirs = array_filter(glob($path), 'is_dir');
foreach($dirs as $f) {
	$file = basename($f);
	echo <<< OPTION
	<option value="{$file}">{$file}</option>
OPTION;
}

Open in new window

Working sample here
T SmithAuthor Commented:
Thank you for your response. Do I have to list every document under the root, rather than fetching the data from the folders to display?
Julian HansenCommented:
Not sure I understand the question? The solution works on a hierarchical folder structure.

To display files in the last drop down you would test for all parameters not false (root and sub1 in the PHP file) - if that is the case then ask for files instead of folders.

I will see if I can update the sample to do that.
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Download your eBook!
T SmithAuthor Commented:
If you could provide a sample that would be great. Thanks again!
T SmithAuthor Commented:
Hi - still having problems. Can you assist?
Test_v2.html
t2884.php
Julian HansenCommented:
I have updated the sample the changes were fairly trivial
Here is the updated PHP file. The only change is to check if both parameters are specified and then to look for files instead of folders
<?php
$path = 't2884/';

// GET THE REQUEST PARAMETERS
$root = isset($_GET['root']) ? $_GET['root'] : false;
$sub1 = isset($_GET['sub1']) ? $_GET['sub1'] : false;

// IGNORE INFANTILE MOTIVATION OF THOSE THAT LIKE TO BREAK THINGS
if (strpos($root, '..') !== false || strpos($sub1, '..') !== false) die("C'mon don't be like that ...");

// ... AND JUST IN CASE THEY ARE REALLY PERSISTANT
$root = preg_replace('/[^A-Za-z0-9 ]/', '', $root);
$sub1 = preg_replace('/[^A-Za-z0-9 ]/', '', $sub1);

if ($root) $path .= "{$root}/";
if ($sub1) $path .= "{$sub1}/";
$path .= '*';

// ASSUME WE ARE LOOKING FOR FOLDERS
$flag = 'is_dir';
// IF root AND sub THEN WE ARE WE LOOKING FOR FILES
if ($root && $sub1) {
	$flag = 'is_file';
}

// GET THE ITEMS AND FILL THE ARRAY
$items = array_filter(glob($path), $flag);

echo <<< OPTION
  <option "">-- Select --</option>
OPTION;
foreach($items as $f) {
  $file = basename($f);
  echo <<< OPTION
    <option value="{$file}">{$file}</option>
OPTION;
}

Open in new window


Updated sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
T SmithAuthor Commented:
Thank you! Is this possible to fetch the data locally rather than fetching from the file server? If so can you provide a sample for that? Lastly, how do I open the document (word, excel, pdf, etc.) when the user clicks a button?
Julian HansenCommented:
You can't for local files - the security model of the browser (for obvious reasons) prevents script having access to local resources.
T SmithAuthor Commented:
It was a pleasure working with Julian!
Julian HansenCommented:
Thank you and, you are most welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.