0

I have two drop-downs, both are scraped from directories. The first drop-down chooses the path to take i.e. scrape the first folder. The second drop-down determines the image to display from that folder. However I cannot get the value of the second drop-down to update when the first drop-down is changed. This means the drop-down is empty.

Code:

<select name="Image1">
    <option value="" selected="selected"></option>
  <?php 
    $dir1 = "../img/";
    $dh1  = opendir($dir1);
    while (false !== ($filename1 = readdir($dh1))) {
        if ($filename1 === '.' or $filename1 === '..' or $filename1 === '.htaccess' or $filename1 === 'theme' )
            continue;
     else
            $files1[] = $filename1;
  echo "<option value='".$dir1 ."/". $filename1 . "'>" . $filename1 . "</option>";  }
    sort($files1);
 ?>

</select>
<select name="Image2" onChange="showImage(this.value)">
    <option value="" selected="selected"></option>
  <?php 
    $dirname = $_POST['Image1'];
    $dir = "../img/" . $dirname . "/";
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        if (strpos($filename, '.JPG')!== false) 
            $files[] = $filename;
     else
            continue;
  echo "<option value='".$dir ."/". $filename . "'>" . $filename . "</option>";  }
    sort($files);
 ?>

</select>  

<div id="image_div"></div> 

<script type="text/javascript">
 function showImage(value)
 {
  var img = "<img src='"+value+"' style=width:55em; height:55em; />";
  document.getElementById('image_div').innerHTML = img;
 }
</script>

Edit: I have read through many other questions and not been able to implement them due to there being either SQL or predefined values, so simply filtering the select by id will not work.

finn3y
  • 101
  • 1
  • 1
  • 9
  • 1
    Possible duplicate of [Change the options array of a select list](https://stackoverflow.com/q/6364748/1255289) – miken32 Jan 12 '18 at 18:05
  • This is pretty easy using jquery. And this has been asked multiple times too here. – IncredibleHat Jan 12 '18 at 18:06
  • 1
    Do you want to have it interactive on client side? Then you will need to send AJAX request to the server with the selected option and back with list of options to be added to the second select. – ino Jan 12 '18 at 18:08
  • Yes, the client will pick the image to be shown. @ino – finn3y Jan 12 '18 at 18:08
  • Not much help, I have had a look and found nothing that can help. @IncredibleHat – finn3y Jan 12 '18 at 18:09
  • 1
    https://stackoverflow.com/questions/17384705/updating-list-of-select-options-using-jquery-and-ajax – ino Jan 12 '18 at 18:10
  • 1
    https://stackoverflow.com/questions/47102531/filtering-dropdown-based-on-another-dropdown-selection – IncredibleHat Jan 12 '18 at 18:10
  • 1
    https://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option – ino Jan 12 '18 at 18:14
  • 1
    Maybe this will give you some idea: http://www.mitrajit.com/populate-dropdown-list-based-selection-another-dropdown-list-using-ajax/ – npcoder Jan 12 '18 at 18:17
  • See updated 'edit' section of original post. @IncredibleHat – finn3y Jan 12 '18 at 18:35
  • See updated 'edit' section of original post. @ino – finn3y Jan 12 '18 at 18:35
  • See updated 'edit' section of original post. @Humbal – finn3y Jan 12 '18 at 18:35
  • 1
    You can use a unique ID still, just md5 the filename into a id-safe string to use for referencing and manipulation. – IncredibleHat Jan 12 '18 at 19:09
  • Would you be able to link me anywhere on how to do that? I’ve done some research and found nothing. @IncredibleHat – finn3y Jan 12 '18 at 20:11
  • 1
    Well your main flaw in the code in your question is how to setup the second `select` element. Either you need to ajax results based on the first one, to swap out the second, or you need to add every choice into the second (but hidden) so you can filter/show/hide based on the first. Keying by id is the least of the troubles at this point, as once you straighten out the core setup, a lot of the other issues will be nullified. I am unfortunately not having the time to rewrite your code for an example... boss is hounding me too ;) – IncredibleHat Jan 12 '18 at 20:56
  • looking at implementing a better system today. Thanks for the help! @IncredibleHat – finn3y Jan 13 '18 at 15:31

0 Answers0