Help with generating dynamic dropdowns?

JavaScript
1

I think that’s what you call it.



$dir = 'gallery/';
$categories = scandir($dir);
$categories = array_slice($categories, 2);







<p><select name=\\"category\\">\
<option>Choose a Category:</option>\
";
foreach ($categories as $value) {


if ($_GET['class'] == $value) {
    $content .= "<option selected value=\\"$value\\">$value</option>\
";
} else {
    $content .= "<option value=\\"$value\\">$value</option>\
";
}



}

So I’m wanting to add an additional dropdown. Right now it’s looking in the gallery/ directory and grabbing all folders for the dropdown. Once you choose one, I want to grab all folders inside THAT folder, and do the same. So depending on what option you choose, it would generate another list of directories. Just not sure how to do this.

2

Yes, they are indeed called dynamic dropdown lists.
To do what you want you’d need AJAX (Asynchronous Javascript and XML).

Here is an article with an example for countries, but you can customize it to whatever you want :slight_smile:

3

If it’s in a PHP file, then yes, you can use PHP to generate javascript. Won’t mess up the javascript.
I’m assuming you know what the script does and how to change it to your requirements?

Yes, but it’s not as easy as with PHP (although the concept is the same). Google for “javascript query string”.

I’d suggest you get the dropdowns working first and only then worry about selecting the proper one on page reload, otherwise you might get massively confused :slight_smile:
(I know I always get confused when I want to get all parts of a program to work at the same time, it’s way better to divide and conquer).

4

How about with just straight javascript? I found a script that works, but I’m not familiar enough with javascript to do one final step on it.

Here is the script part that tells it what options to choose. I believe I can put bits of php in here to generate my options, would that be correct to assume that? Or will it mess the javascript up to put in php for generating?


<script language="javascript" type="text/javascript">
function dropdownlist(listindex)
{

document.formname.subcategory.options.length = 0;
switch (listindex)
{

case "Alabama International Dragway 5-21-10 - 5-23-1" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
document.formname.subcategory.options[2]=new Option("Audio/Video","Audio/Video");
document.formname.subcategory.options[3]=new Option("Beddings","Beddings");
document.formname.subcategory.options[4]=new Option("Camera","Camera");
document.formname.subcategory.options[5]=new Option("Cell Phones","Cell Phones");

break;

case "Atlanta Dragway 4-16-10 - 4-18-10" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Colleges","Colleges");
document.formname.subcategory.options[2]=new Option("Institutes","Institutes");
document.formname.subcategory.options[3]=new Option("Schools","Schools");
document.formname.subcategory.options[4]=new Option("Tuitions","Tuitions");
document.formname.subcategory.options[5]=new Option("Universities","Universities");

break;


}
return true;
}
</script>

Then I have this now for my dropdowns:



$dir = 'gallery/';
$categories = scandir($dir);
$categories = array_slice($categories, 2);






if (!isset($_GET['subpage'])) {   // Image Upload Form Below
  $content .= "<form method=\\"post\\" id=\\"formname\\" name=\\"formname\\" action=\\"index.php?page=gallery&add=new&subpage=upload\\" enctype=\\"multipart/form-data\\">



<p><select name=\\"category\\" onchange=\\"javascript: dropdownlist(this.options[this.selectedIndex].value);\\">\
<option>Choose a Category:</option>\
";

foreach ($categories as $value) {


if ($_GET['class'] == $value) {
    $content .= "<option selected value=\\"$value\\">$value</option>\
";
} else {
    $content .= "<option value=\\"$value\\">$value</option>\
";
}



}

$content .= "</select>\
</p>

<p>
<script type=\\"text/javascript\\" language=\\"JavaScript\\">
document.write('<select name=\\"subcategory\\"><option value=\\"\\">Select Sub-Category</option></select>')
</script>
<noscript>

<select name=\\"subcategory\\" id=\\"subcategory\\" >
<option value=\\"\\">Select Sub-Category</option>
</select>
</noscript>

</p>

File:<br />
  <input type=\\"file\\" name=\\"imagefile\\" class=\\"form\\">
  <br /><br />
  <input name=\\"submit\\" type=\\"submit\\" value=\\"Sumbit\\" class=\\"form\\">  <input type=\\"reset\\" value=\\"Clear\\" class=\\"form\\">
  </form>";

So I have two dropdowns, second one is generating based on the choice. This is working correctly. Will I be able to, with the javascript, keep the options chosen, selected after submitting the form? It’s an image upload script, after uploading one image, the same page reloads and I need the dropdown menus to be the same choices as I just chose. I could do this with one and before added the javascript, pretty easy with this part:


if ($_GET['class'] == $value) {
    $content .= "<option selected value=\\"$value\\">$value</option>\
";
} else {
    $content .= "<option value=\\"$value\\">$value</option>\
";
}

Would I be able to do something as simple as that in my top javascript bit when I do the php part?