本篇文章主要介紹PHP+Mysql+jQuery實(shí)現(xiàn)的查詢和列表框選擇，感興趣的朋友參考下，希望對(duì)大家有所幫助。

本文講解如何通過ajax查詢mysql數(shù)據(jù)，并將返回的數(shù)據(jù)顯示在待選列表中，再通過選擇最終將選項(xiàng)加入到已選區(qū)，可以用在許多后臺(tái)管理系統(tǒng)中。本文列表框的操作依賴jquery插件。

HTML

說明，HTML內(nèi)容是一個(gè)表單，里面放置有一個(gè)查詢輸入框，和一個(gè)列表框，以及相關(guān)按鈕。

MYSQL數(shù)據(jù)表結(jié)構(gòu)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是一張聯(lián)系人資料表，包括姓名和手機(jī)號(hào)碼字段。

CSS

本例中只加載了Multiselect插件所需的樣式文件，其他CSS大家可以自行設(shè)計(jì)。

JAVASCRIPT

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

接著我們來調(diào)用Multiselect插件。$("#liOption").multiselect2side({

selectedPosition: 'right',

moveOptions: false,

labelsx: '待選區(qū)',

labeldx: '已選區(qū)'

});

然后我們來寫搜索按鈕進(jìn)行Ajax查詢數(shù)據(jù)的操作。$("#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("沒有記錄！");

}else{

$("#liOptionms2side__sx").html(msg);

$("#msg_ser").html("");

}

}

});

$("#msg_ser").ajaxSend(function(event, request, settings){

$(this).html("");

});

});

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

PHP

首先來看action.php的處理。

第一步是連接數(shù)據(jù)庫。$conn=mysql_connect("localhost","root","");

mysql_select_db("demo",$conn);

mysql_query("SET names UTF8");

第二步讀取數(shù)據(jù)，并輸出。通過檢測(cè)搜索框傳來的值，構(gòu)造不同的SQL語句，并將數(shù)據(jù)返回輸出，代碼如下：$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";

}

最后還有一個(gè)提交操作，后臺(tái)post.php程序來獲取最終提交的項(xiàng)的值。$selID=$_POST['liOptionms2side__dx'];

if(!empty($selID)){

$str=implode(",",$selID);

echo $str;

}else{

echo "沒有選擇任何項(xiàng)目！";

}

總結(jié)：以上就是本篇文的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)推薦：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的php与mysql列表_PHP+Mysql+jQuery实现的查询和列表框选择的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。