首頁 > 開發者 > PHP

PHP三級聯動菜單

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

//資料庫mysql

-- 資料庫: `student`
--

-- --------------------------------------------------------

--
-- 表的結構 `student`
--

CREATE TABLE `student` (
  `id` int(50) NOT NULL auto_increment,
  `name` varchar(50) collate utf8_unicode_ci NOT NULL,
  `dept` varchar(50) collate utf8_unicode_ci NOT NULL,
  `class` varchar(50) collate utf8_unicode_ci NOT NULL,
  `sex` varchar(50) collate utf8_unicode_ci NOT NULL,
  `dept_id` int(50) NOT NULL,
  `class_id` int(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;

--
-- 匯出表中的資料 `student`
--

INSERT INTO `student` (`id`, `name`, `dept`, `class`, `sex`, `dept_id`, `class_id`) VALUES
(1, '電腦名稱字', '電腦工程系', '計061', '男', 1, 11),
(2, '教計名字', '電腦工程系', '教技061', '男', 1, 14),
(3, '管理名字', '管理系', '管理061', '女', 2, 21),
(4, '機械名字', '機械工程系', '自動化061', '男', 3, 31);

///以下是代碼

<?php  
$link=mysql_connect("localhost","root","") or die("資料庫伺服器串連錯誤".mysql_error());  
mysql_select_db("student",$link) or die("資料庫訪問錯誤".mysql_error());  
mysql_query("set character set gb2312");
mysql_query("set names gb2312");
?>
<html>
 <head>
  <title>下拉框連動</title>
 </head>
<body>
<script language="JavaScript">
 
//二級菜單數組
var subcat = new Array();
<?php
$i=0;
$sql="select * from student";
$query=mysql_query($sql,$link);
while($arr=mysql_fetch_array($query))
{
 echo "subcat[".$i++."] = new Array('".$arr["dept_id"]."','".$arr["class"]."','".$arr["class_id"]."');\n";
}
?>

//三級菜單數組
var subcat2 = new Array();
<?php
$i=0;
$sql="select * from student";
$query=mysql_query($sql,$link);
while($arr=mysql_fetch_array($query))
{
 echo "subcat2[".$i++."] = new Array('".$arr["class_id"]."','".$arr["class"]."','".$arr["name"]."');\n";
}
?>
function changeselect1(locationid)
{
 document.form1.s2.length = 0;
 document.form1.s2.options[0] = new Option('22請選擇22','');
 for (i=0; i<subcat.length; i++)
 {
  if (subcat[i][0] == locationid)
  {
   document.form1.s2.options[document.form1.s2.length] = new Option(subcat[i][1], subcat[i][2]);
  }
 }
}
function changeselect2(locationid)
{
 document.form1.s3.length = 0;
 document.form1.s3.options[0] = new Option('33請選擇33','');
 for (i=0; i<subcat2.length; i++)
 {
  if (subcat2[i][0] == locationid)
  {
   document.form1.s3.options[document.form1.s3.length] = new Option(subcat2[i][2], subcat2[i][0]);
  }
 }
}

</script>三級聯動示範：<BR>

<form name="form1">
 
<select name="s1" onChange="changeselect1(this.value)">
<option>--請選擇--</option>

<option  value=1>電腦工程系</option>
<option  value=2>管理系</option>
<option  value=3>機械工程系</option>
</select>

<select name="s2" onChange="changeselect2(this.value)">
 <option>--請選擇--</option>
</select>

<select name="s3">
  <option>--請選擇--</option>
</select>
</form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More