本文講解如何通(tōng)過ajax查詢mysql數(shù)據，并将返回的數(shù)據顯示在待選列表中，再通(tōng)過選擇最終将選項加入到已選區(qū)，可(kě)以用在許多(duō)後台管理(lǐ)系統中。本文列表框的操作(zuò)依賴jquery插件：Multiselect。

XHTML

說明(míng)，HTML內(nèi)容是一個(gè)表單，裏面放置有(yǒu)一個(gè)查詢輸入框，和(hé)一個(gè)列表框，以及相關按鈕。

MYSQL數(shù)據表結構

CREATE TABLE IF NOT EXISTS `t_mult` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(32) NOT NULL,
  `phone` varchar(20) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

表t_mult是一張聯系人(rén)資料表，包括姓名和(hé)手機号碼字段。

CSS

本例中隻加載了Multiselect插件所需的樣式文件，其他CSS大(dà)家(jiā)可(kě)以自行(xíng)設計(jì)。

JAVASCRIPT

首先需要引用本例所需的兩個(gè)js文件。

接着我們來(lái)調用Multiselect插件。

$("#liOption").multiselect2side({
	selectedPosition: 'right',
	moveOptions: false,
	labelsx: '待選區(qū)',
	labeldx: '已選區(qū)'
});

關于Multiselect的應用，如果不熟悉的可(kě)以查看之前的文章：Multiselect：操作(zuò)多(duō)選列表框

然後我們來(lái)寫搜索按鈕進行(xíng)Ajax查詢數(shù)據的操作(zuò)。

$("#searchOption").click(function(){
	var keys=$("#keys").val();
	$.ajax({
         type: "POST",
         url: "action.php",
         data: "title="+keys,
         success: function(msg){
			if(msg==1){
				$("#msg_ser").show().html("沒有(yǒu)記錄！");
			}else{
				$("#liOptionms2side__sx").html(msg);
				$("#msg_ser").html("");
			}
         }
    });
	$("#msg_ser").ajaxSend(function(event, request, settings){
        $(this).html("");
    });
});

說明(míng)，當點擊搜索按鈕時(shí)，進行(xíng)的是Ajax異步操作(zuò)，JAVASCRIPT将獲取的搜索框的輸入值，以POST方式傳遞給後台程序action.php處理(lǐ)，處理(lǐ)後，返回不同的結果給JAVASCRIPT，如果返回1，HTML頁面會(huì)提示“沒有(yǒu)記錄”，反之，則将結果輸出給左邊列表框（待選區(qū)）：liOptionms2side__sx。注意關鍵的地方到了，為(wèi)什麽列表框不是XHTML離的liOption，而變成了liOptionms2side__sx了呢？這個(gè)要從Multiselect插件說起，Multiselect插件其實就是将一個(gè)列表框裝換成左右兩個(gè)列表框，已供相關操作(zuò)，通(tōng)過查看其插件代碼不難發現，左邊的列表框名為(wèi)：liOptionms2side__sx，右邊列表框（已選區(qū)）名為(wèi)：liOptionms2side__dx，後面會(huì)用到。

PHP

首先來(lái)看action.php的處理(lǐ)。

第一步是連接數(shù)據庫。

$conn=mysql_connect("localhost","root","");
mysql_select_db("demo",$conn);
mysql_query("SET names UTF8");

第二步讀取數(shù)據，并輸出。通(tōng)過檢測搜索框傳來(lái)的值，構造不同的SQL語句，并将數(shù)據返回輸出，代碼如下：

$keys=trim($_POST['title']);
$keys=mysql_real_escape_string($keys,$conn);
if(!empty($keys)){
  	  $sql="select * from t_mult where username like '%$keys%' or phone='$keys'";
}else{
  	  $sql="select * from t_mult";
}
$query=mysql_query($sql);
$count=mysql_num_rows($query);
if($count>0){
  	while($row=mysql_fetch_array($query)){
  	    $str.="".$row['username']."-".$row['phone']."";
    }
    echo $str;
}else{
  	echo "1";
}

最後還(hái)有(yǒu)一個(gè)提交操作(zuò)，後台post.php程序來(lái)獲取最終提交的項的值。

$selID=$_POST['liOptionms2side__dx'];
if(!empty($selID)){
	$str=implode(",",$selID);
    echo $str;
}else{
	echo "沒有(yǒu)選擇任何項目！";
}

注意，我們獲取的是右邊列表框liOptionms2side__dx的值，而不是liOption的值。

好了，到這裏，一個(gè)查詢、操作(zuò)的例子已經實現，但(dàn)是還(hái)有(yǒu)一點點瑕疵，在待選區(qū)往已選區(qū)添加項目時(shí)，如何判斷控制(zhì)已經添加過的項目不能重複添加。如果你(nǐ)有(yǒu)辦法，歡迎一起切磋。