Changing contents of HTML select based on dropdown

Question

I have a select item, that is filled with a list of files. This list of files is stored in a php variable.

I have another list of files, from another directory, stored in another variable.

I have a dropdown, with 2 options. When I change the dropdown, I want the items in the select to change to the file list associated with the item selected.

For example, my dropdown contains:

Misc Images
People

I have 2 variables, $misc and $people.

When Misc is selected, I want the select to contain all the images listed in $misc, and when the People option is selected I want the select to contain all the options listed in $people.

As far as looping through the php to generate all the items is fine, what I don't understand is how to do the javascript portion?

Thanks, and apologies for poor wording.

Maximilian Ehlers · Answer 1 · 2011-01-27T16:53:23.900

0

could You provide us some code? It is quite heavy to write it completely of nothing :)

UPDATE:

then how about You try the following (or similar) by using jQuery:

<select id="foo">
    <option class="misc">MISC</option>
    <option class="misc">MISC2</option>
    <option class="people">People1</option>
</select>
<script type="text/javascript">
    $(document).ready(function(){
        $('option.misc').click(function(){
            $('#foo').html('<option class="misc">MISC</option>
            <option class="misc">MISC2</option>');
        });
    });
</script>

edited Jan 27 '11 at 16:53

answered Jan 27 '11 at 16:39

Maximilian Ehlers

328
1
6

Well, I suppose the main thing is I know how to clear the current options from the select, but I'm unable to get javascript to repopulate it from a php variable? The code is embedded within a lot of other code, to dig it out and edit it so that it could be understood here might take a while! :) – AndrewC Jan 27 '11 at 16:41
@AndyC: you have to output the php variable to the page, usually to hidden elements, beforehand. Remember - php is server-side, so the php variable *does not exist* anymore when your javascript is running. – Stephen P Jan 27 '11 at 17:50

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

I think something like this would work. You would set the onchange attribute of your drop down box to call that function. You will need to have a URL that returns the options you want to use in JSON (selectMenus.php in that example). You'd need two different urls or one that takes a parameter to indicate which option set.

edited May 23 '17 at 12:26

Community

1
1

answered Jan 27 '11 at 16:48

JeffB

1,887
15
13

score 0 · Answer 3 · answered Jan 27 '11 at 17:11

PHP is server side. JavaScript is client side. You have two options (1) send an XmlHTTP request back to your server to pull the options and update the select list, or (2) send the values to a hidden field on the initial render of the page and get the values from there.

score 0 · Accepted Answer · 2011-01-27T17:54:41.410

Try this code out.

PHP:

<?php
    $miscArray = array("misc1", "misc2", "misc3");
    $misc = implode(", ", $miscArray);
    $peopleArray = array("people1", "people2", "people3");
    $people = implode(", ", $peopleArray);
?>

HTML:

<form action="#">
    <select id="fileCat">
        <option id="misc">Misc</option>
        <option id="miscData" style="display:none"><?php echo $misc ?></option>
        <option id="people">People</option>
        <option id="peopleData" style="display:none"><?php echo $people ?></option>
    </select>
    <select id="files"></select>
</form>

JS:

init();

function init()
{
    addListeners();  
}

function addListeners()
{
    document.getElementById("fileCat").onchange = fillSelect; 
}

function fillSelect()
{
    var fileCat = document.getElementById("fileCat");
    var imageFiles;
    switch(fileCat.options[fileCat.selectedIndex].id)
    {
        case "misc":
        imageFiles = document.getElementById("miscData").innerHTML.split(", ");
        break;    
        case "people":
        imageFiles = document.getElementById("peopleData").innerHTML.split(", ");
        break;  
    }
    var parent = document.getElementById("files");
    parent.innerHTML = "";
    if(imageFiles.length)
    {
        for(var i=0;i<imageFiles.length;i++)
        {
            var option = document.createElement("option");
            //populate option with corresponding image text
            option.innerHTML = imageFiles[i];
            parent.appendChild(option);
        }
    }
}

I mocked up some data in PHP and then echoed it into a hidden <option> tag for each category. Then, the data is grabbed using a case/switch depending on the id of the selected option.

Changing contents of HTML select based on dropdown

4 Answers4