用php数组下拉菜单[关闭]

I would like to change this menu so that if I choose the second report1 shows the menu that says if there is type1 otherwise go to the third menu with written about1. In all four menus. I think the best way is the PHP but do not know the language.

HTML:

<form name="classic">
   <select style="width: 20%">
       <option value="0"></option>
       <option value="2">report1</option>
       <option value="2">report2</option>
   <option value="2">report3</option>
       <option value="2">report4</option>
   </select>
   <br /><br />
<select style="width: 20%">
    <option value="0"></option>
    <option value="2">tipo1</option>
    <option value="2">tipo2</option>
<option value="2">tipo3</option>
    <option value="2">tipo4</option>
</select>
<br /><br />
    <select style="width: 20%">
    <option value="0"></option>
    <option value="4">about1</option>
    <option value="4">about2</option>
<option value="4">about3</option>
    <option value="4">about4</option>
</select>
<br /><br />
<select style="width: 20%">
    <option value="0"></option>
    <option value="4">periodo1</option>
    <option value="4">periodo2</option>
<option value="4">periodo3</option>
    <option value="4">periodo4</option>
</select>
<br /><br />

</form>

this is the part javascript

<script language="JavaScript">
var tiporeportlist=document.classic.tiporeport
var reportlist=document.classic.report

var report=new Array()
report[0]=["report1"]
report[1]=["report2"]
report[2]=["report3"]
report[3]=["report4"]

var tipo=new Array()
tipo[0]=["tipo1"]
tipo[1]=["tipo2"]
tipo[2]=["tipo3"]
tipo[3]=["tipo4"]

var banca=new Array()
about[0]=["about1"]
about[1]=["about2"]
about[2]=["about3"]
about[3]=["about4"]

var periodo=new Array()
periodo[0]=["periodo1"]
periodo[1]=["periodo2"]
periodo[2]=["periodo3"]
periodo[3]=["periodo4"]

function getSelected(select) {

    return select.options[select.selectedIndex].value;
}

function getElement(id)  {

    return document.getElementById(id);
}
function popolaSelect(select,opt) {

    switch (opt) {
        case '1':
            var arr = report;
            break;
        case '2':
            var arr = tipo;
            break;
        case '3':
            var arr = about;
            break;
        case '4':
            var arr = periodo;
            break;
        default:
            return;
            break;
    }

    select.options.length = 1;

    for(var i=0; i<arr.length; i++) {                              

        select.options[select.options.length] = new Option(arr[i],i);        
    }
}
</script>

You could use php for this but then without javascript and/or ajax the page needs to refresh every time.

For that reason it is better to use javascript for this. I advice you to have a look at jquery and try it out.

The options cannot be changed dynamically with PHP. The page should be refreshed everytime and values should be passed through GET or POST parameters or by cookie.

A more easier implementation would be to use javascript as below. It should work on Internet explorer without any problem. Haven't tested on it though.

HTML:

<form name="classic">
   <select style="width: 20%" id="s1" onchange="choose('s2',this)">
       <option value="0"></option>
       <option value="2">report1</option>
       <option value="2">report2</option>
   <option value="2">report3</option>
       <option value="2">report4</option>
   </select>
   <br /><br />
<select style="width: 20%" id="s2" onchange="choose('s3',this)">
    <option value="0"></option>
    <option value="2">tipo1</option>
    <option value="2">tipo2</option>
<option value="2">tipo3</option>
    <option value="2">tipo4</option>
</select>
<br /><br />
    <select style="width: 20%" id="s3" onchange="choose('s4',this)">
    <option value="0"></option>
    <option value="4">about1</option>
    <option value="4">about2</option>
<option value="4">about3</option>
    <option value="4">about4</option>
</select>
<br /><br />
<select style="width: 20%" id="s4">
    <option value="0"></option>
    <option value="4">periodo1</option>
    <option value="4">periodo2</option>
<option value="4">periodo3</option>
    <option value="4">periodo4</option>
</select>
<br /><br />

Javascript:

function choose(target,option)
{
    var val = option.options[option.selectedIndex].text;
    document.getElementById(target).options[0].innerHTML = val;
}

Example: http://jsfiddle.net/xensoft/QdYSz/