Question

I have a web server with PHP and I have a few files under certain folders I need to be able to select. The file names are in the format of “YYYY-MM-DD_XXXXXXX.php”. Y stands for Year, M stands for month, D stands for date. What I need to do is make a dynamic drop down menu with the date for which there is certain file in the folder. For example. There are two files: 2013-01-01_xxxxx.php and 2013-01-07_xxxx.php, In this way there should be two options available in the drop down list which is “2013-01-01” and “2013-01-07”. And once I choose one of them, correspond file will be displayed below in the webpage. I don’t know how to make such drop down menu.

Answer 1

<select>
    <option value="one">First Text</option>
    <option value="two">Second Text</option>
</select>

creates a drop down. Since you want it dynamically allocated values, you could do:

foreach (myArray as row) {
   echo '<option value='" . $row['value'] . '">' . $row['text'] . '</option>';
}
echo '</select>';

to dynamically create the menu by POSTing the selection to a page which will read from the file… painful.

What I would do is use jQuery (specifically ajax) to read from the file.

Lets say you have:

<?php
$cities = array(
    'IL' => array( 'Chicago', 'Naperville', 'Decatur', 'Saint Charles' ),
    'IN' => array( 'Gary', 'Miller', 'Portage', 'Merrillville' )
);

print json_encode( $cities[ $_POST[ 'selection' ] ] );
exit;
?> 

You use json_encode function to pass print (or echo) the results in your page.

and your javascript would be something like this:

$(document).ready(function() {

$('#selection').change(function() {
    $.post(
        'some-url.php',
        {
            'selection':$('#selection').val()
        },
        function(data, textStatus) {
            $.each(data, function(index, value) {
                $('#city').append('<option value="' + value + '">' + value + '</option>');
            });
        },
        'json'
    );
});

});

Here is a fairly decent tutorial: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ and http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html

and an example: http://jsfiddle.net/vjkaG/ and http://jsfiddle.net/g7wzT/1/