更改 <select>值，给定数字并从数组中获取值

Question

I hope that somebody can help me and I want to thank you all in advance for your help. I have a php code that collects informations in one array made in this way:

$array_pages[$index][0] : menu id (it tells me in which menu I can find the page)

$array_pages[$index][1] : here I store the page name (without extension)

$array_pages[$index][2] : this field contains a string (with more informations about the page)

This multidimensional array is already built by my code.

Here's what I would like to do: At the end of a page (where I have $array_pages ) I would like to put two select menus:

<select name='themenu' style='width: 150px'>
<option value='1'> Menu number 1 </option>
<option value='2'> Menu number 2 </option>
<option value='3'> Menu number 3 </option>
</select>

In this select I would like to make the user choose a menu among the 3. The part where I am lost is the following:

I would like to add another next to the first one. This second select has to change its content according to the value of the first. Example:

If I choose Menu number 2 (value 2), the second select should display something like this:

<select name='thepages' style='width: 150px'>
<option value='$array_pages[$index][2]'> $array_pages[$index][1] </option> 
<!-- ... -->
</select>

for each element in the array that has $array_pages[$index][0] = 2 (2 because it is the value of the first select). Is it possible to do it without refreshing the page?

I have tried to understand how to do something like this with javascript but I am lost and I ended up with nothing

I hope that I have explained well enough my problem... Please help! Thank you again!

Answer 1

The challenging part here is the interplay between JavaScript and PHP. Once the page is rendered and sent to the browser, the PHP code is finished. Everything else must be accomplished in JavaScript (unless you are doing some kind of post-back or AJAX model).

So you must make all the values completely available to the JavaScript code before the PHP is finished. Two ways you can accomplish this:

1. Create all possible second <select> with PHP, but hide all of them ( style=display:none ). Then the JavaScript would show/hide the appropriate second menu depending on the selection in the first.
2. Create a JavaScript array from the PHP array that JavaScript can use to populate the second submenu dynamically when the first menu option is selected.

The first option is probably simpler, at the expense of including extra HTML bloat in the response (shouldn't be a big deal if you only have a couple submenus). So you would have something like this following:

<select name='themenu' style='width: 150px' onchange='changesubmenu(this)'>
  <option value='1'> Menu number 1 </option>
  <option value='2'> Menu number 2 </option>
  <option value='3'> Menu number 3 </option>
</select>
<select id="thepages1" style="display:none">
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>
<select id="thepages2" style="display:none">
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>
<select id="thepages3" style="display:none">
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

And your changesubmenu() JavaScript function would look something like this:

var tempid=''; // save previous id to hide it

function changesubmenu(parent) {
    // get selected menu id
    var id = parent.value;
    var submenuid = "thepages"+id;

    // show the selected menu
    var submenuel = document.getElementById(submenuid);
    if (submenuel) submenuel.style.display = "";

    // hide the previously selected menu
    var oldsubmenuid = "thepages"+tempid;
    var oldsubmenuel = document.getElementById(oldsubmenuid);
    if (oldsubmenuel) oldsubmenuel.style.display = "none";

    // update old id for reference
    tempid = id;
}​

Demo: http://jsfiddle.net/NmKvK/

Answer 2

In my experience the best way to do so with javascript is to load all the possibilities onto the page showing only the ones you select (using javascript).

for example

select 1
select 2 hidden
select 3 hideen

in select 1 you chose option 1

select 1
select 2 showing
select 3 hidden

in select 1 you chose option 1

select 1
select 2 hidden
select 3 showing

If you have a LOT of content then you need to do this dynamically using ajax and a second php page (or you can use the same php file).

So when selecting option 1 it triggers an AJAX call (with a param that is option 1 value) that loads the content of, for example, content.php into a javascript variable and from there you can load it into a place holder after the first select.

Hope this helps!