二級聯動下拉菜單選擇應用在在很(hěn)多(duō)地方，比如說省市下拉聯動，商品大(dà)小(xiǎo)類下拉選擇聯動。本文将通(tōng)過實例講解使用jQuery+PHP+MySQL來(lái)實現大(dà)小(xiǎo)分類二級下拉聯動效果。

先看下效果

大(dà)類：前端技(jì)術(shù)程序開(kāi)發數(shù)據庫小(xiǎo)類：

實現的效果就是當選擇大(dà)類時(shí)，小(xiǎo)類下拉框裏的選項內(nèi)容也随着改變。實現原理(lǐ)：根據大(dà)類的值，通(tōng)過jQuery把值傳給後台PHP處理(lǐ)，PHP通(tōng)過查詢MySQl數(shù)據庫，得(de)到相應的小(xiǎo)類，并返回JSON數(shù)據給前端處理(lǐ)。

XHTML

首先我們要建立兩個(gè)下拉選擇框，第一個(gè)是大(dà)類，第二個(gè)是小(xiǎo)類。大(dà)類的值可(kě)以是預先寫好，也可(kě)以是從數(shù)據庫讀取。

大(dà)類：前端技(jì)術(shù)程序開(kāi)發數(shù)據庫小(xiǎo)類：

jQuery

先寫一個(gè)函數(shù)，獲取大(dà)類選擇框的值，并通(tōng)過$.getJSON方法傳遞給後台server.php，讀取後台返回的JSON數(shù)據，并通(tōng)過$.each方法遍曆JSON數(shù)據，将對應的值寫入一個(gè)option字符串，最後将option追加到小(xiǎo)類裏。

function getSelectVal(){
	$.getJSON("server.php",{bigname:$("#bigname").val()},function(json){
		var smallname = $("#smallname");
		$("option",smallname).remove(); //清空(kōng)原有(yǒu)的選項
		$.each(json,function(index,array){
			var option = ""+array['title']+"";
			smallname.append(option);
		});
	});
}

注意，在遍曆JSON數(shù)據追加之前一定要先将小(xiǎo)類裏的原有(yǒu)的項清空(kōng)。清空(kōng)選項的方法有(yǒu)兩種，一種是上(shàng)文代碼中提到，還(hái)有(yǒu)一種更簡單直接的方法：

smallname.empty();

然後，在頁面載入後執行(xíng)調用函數(shù)：

$(function(){
	getSelectVal();
	$("#bigname").change(function(){
		getSelectVal();
	});
});

在頁面初始的時(shí)候，下拉框是要設置選項的，所以在初始的時(shí)候就要調用getSelectVal()，而當大(dà)類選項改變時(shí)，也調用了getSelectVal()。

PHP

include_once("connect.php"); //鏈接數(shù)據庫

$bigid = $_GET["bigname"];
if(isset($bigid)){
    $q=mysql_query("select * from catalog where cid = $bigid");
	while($row=mysql_fetch_array($q)){
		$select[] = array("id"=>$row[id],"title"=>$row[title]);
	}
	echo json_encode($select);
}

根據jQuery傳遞過來(lái)的大(dà)類的value值，構造SQL語句查詢分類表，最終輸出JSON數(shù)據。本站(zhàn)在未做(zuò)特别說明(míng)的情況下所使用的PHP與MySQL連接，和(hé)查詢語句等均使用原始語句方法如mysql_query等，目的就是為(wèi)了讓讀者能夠直觀的知曉數(shù)據的傳輸查詢。

最後附上(shàng)MYSQL表結構:

CREATE TABLE `catalog` (
  `id` mediumint(6) NOT NULL auto_increment,
  `cid` mediumint(6) NOT NULL default '0',
  `title` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;