выпадающее меню с php-массивом

Question

Я хотел бы изменить это меню так, чтобы, если я выбираю второй отчет1, отображается меню, в котором говорится, что есть type1 в противном случае перейти в третье меню с написанием about1. Во всех четырех меню. Я думаю, что лучший способ - это PHP, но он не знает языка.

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> 

это часть 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> 

Answer 1

Вы можете использовать PHP для этого, но потом без яваскрипт и/или АЯКС страницы необходимо обновить каждый раз.

По этой причине лучше всего использовать javascript для этого. Я советую вам взглянуть на jquery и попробовать его.

Answer 2

Параметры нельзя динамически изменять с помощью PHP. Страница должна обновляться каждый раз, а значения должны передаваться через параметры GET или POST или cookie.

Более простой реализацией будет использование javascript, как показано ниже. Он должен работать в Internet Explorer без каких-либо проблем. Однако не проверял на нем.

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; 
} 

Пример: http://jsfiddle.net/xensoft/QdYSz/