We help IT Professionals succeed at work.

Dynamic  dropdowns using jQuery and PHP

T Smith
T Smith asked
on
441 Views
Last Modified: 2018-01-07
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
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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

Author

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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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

Author

Commented:
If you could provide a sample that would be great. Thanks again!

Author

Commented:
Hi - still having problems. Can you assist?
Test_v2.html
t2884.php
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You can't for local files - the security model of the browser (for obvious reasons) prevents script having access to local resources.

Author

Commented:
It was a pleasure working with Julian!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Thank you and, you are most welcome.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions