ここで難しいのは、JavaScriptとPHPの相互作用です。ページがレンダリングされてブラウザに送信されると、PHPコードが完成します。他のすべてはJavaScriptで実行する必要があります（何らかのポストバックまたはAJAXモデルを実行している場合を除く）。

したがって、PHPが終了する前に、JavaScriptコードですべての値を完全に使用できるようにする必要があります。これを実現する2つの方法：

1. <select>PHPで可能な限りすべての秒を作成しますが、それらをすべて非表示にします（ style=display:none）。次に、JavaScriptは、最初のメニューの選択に応じて、適切な2番目のメニューを表示/非表示にします。
2. 最初のメニューオプションが選択されたときにJavaScriptが2番目のサブメニューに動的にデータを入力するために使用できるPHP配列からJavaScript配列を作成します。

最初のオプションはおそらく単純ですが、応答に余分なHTMLの肥大化が含まれます（サブメニューが2つしかない場合は、大したことではありません）。したがって、次のようなものになります。

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

また、changesubmenu()JavaScript関数は次のようになります。

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

デモ： http： //jsfiddle.net/NmKvK/

私の経験では、javascript でこれを行う最善の方法は、(javascript を使用して) 選択したものだけを表示するページにすべての可能性をロードすることです。

例えば

select 1
select 2 hidden
select 3 hideen

select 1でオプション1を選択しました

select 1
select 2 showing
select 3 hidden

select 1でオプション1を選択しました

select 1
select 2 hidden
select 3 showing

大量のコンテンツがある場合は、ajax と 2 番目の php ページを使用してこれを動的に行う必要があります (または同じ php ファイルを使用できます)。

したがって、オプション 1 を選択すると、たとえば content.php のコンテンツを javascript 変数にロードする AJAX 呼び出し (オプション 1 の値であるパラメーターを使用) がトリガーされ、そこから最初の変数の後にプレースホルダーにロードできます。選択する。

お役に立てれば！