JavaScript + PHP 實戰（一）：基於數據庫的二級聯動下拉菜單動態生成與狀態保持

場景與架構

• 主下拉菜單固定 (HTML)，子菜單從 MySQL 動態加載。
• JS 負責前端聯動渲染，PHP 生成 JS 數組數據。
• 表單提交後保持菜單選中狀態。

HTML 骨架

<select name="mmenu" onchange="setmenu()">
  <option value="a">焦點新聞</option>
  <option value="b">生活時尚</option>
  <option value="c">心情故事</option>
</select>
<select name="smenu" id="smenu"></select>

JS 聯動邏輯 (setmenu)

function setmenu() {
  var menu = new Array("a","b","c"); // 主菜單值
  <?php
  $db = new my_db(); // PHPlib 風格
  $mmenu = array("a","b","c");
  for ($i=0; $iquery("SELECT sub_name FROM sub_menu WHERE main_id='$id'");
      echo "submenu['$id'] = new Array(";
      while ($db->next_record()) {
          echo "\"".$db->f('sub_name')."\",";
      }
      echo ");\n";
  }
  ?>
  // 根據主菜單選中值填充子菜單
  var sel = document.forms[0].mmenu.value;
  var sub = document.forms[0].smenu;
  sub.length = 0;
  for (var i=0; i