欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > PHP >

PHP+Mysql+jQuery实现查询和列表框选择操纵

发布时间:2016-11-25  编辑:杨雨个人博客网站   点击:   

本文讲授怎样通过ajax查询mysql数据,并将返回的数据表现在待选列表中,再通过选择最终将选项插手到已选区,可以用在很多靠山打点体系中。本文列表框的操纵依靠jquery插件:Multiselect。

PHP+Mysql+jQuery实现查询和列表框选择操纵

HTML

<form id="sel_form" action="post.php" method="post">
   <p><input type="text" name="keys" id="keys" value="输入姓名或手机号码" onclick="this.value=''" />
    <input type="button" id="searchOption" value="搜刮" /> <span id="msg_ser"></span></p>
   <div id="sel">
   <select name="liOption[]" id='liOption' multiple='multiple' size='8'>
   </select>
   </div>
   <input type="submit" value="提 交" />
</form>

声名,HTML内容是一个表单,内里安排有一个查询输入框,和一个列表框,以及相干按钮。

MYSQL数据表布局

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是一张接洽人资料表,包罗姓名和手机号码字段。

CSS

<link rel="stylesheet" type="text/Css" href="jquery.multiselect2side.Css" />

本例中只加载了Multiselect插件所需的样式文件,其他CSS各人可以自行计划。

JAVASCRIPT

起首必要引用本例所需的两个js文件。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.multiselect2side.js"></script>
<link rel="stylesheet" type="text/Css" href="jquery.multiselect2side.Css" />

接着我们来挪用Multiselect插件。

$("#liOption").multiselect2side({
	selectedPosition: 'right',
	moveOptions: false,
	labelsx: '待选区',
	labeldx: '已选区'
});

关于Multiselect的应用,假如不认识的可以查察之前的文章:Multiselect:操纵多选列表框

然后我们来写搜刮按钮举办Ajax查询数据的操纵。

$("#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("PHP+Mysql+jQuery实现查询和列表框选择哄骗");
    });
});

声名,当点击搜刮按钮时,举办的是Ajax异步操纵,JAVASCRIPT将获取的搜刮框的输入值,以POST方法转达给靠山措施action.php处理赏罚,处理赏罚后,返回差异的功效给JAVASCRIPT,假如返回1,HTML页面会提醒“没有记录”,反之,则将功效输出给左边列表框(待选区):liOptionms2side__sx。留意要害的处所到了,为什么列表框不是XHTML离的liOption,而酿成了liOptionms2side__sx了呢?这个要从Multiselect插件提及,Multiselect插件着实就是将一个列表框装换成阁下两个列表框,已供相干操纵,通过查察其插件代码不难发明,左边的列表框名为:liOptionms2side__sx,右边列表框(已选区)名为:liOptionms2side__dx,后头会用到。

PHP

起首来看action.php的处理赏罚。

第一步是毗连数据库。

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

第二步读取数据,并输出。通过检测搜刮框传来的值,结构差异的SQL语句,并将数据返回输出,代码如下:

$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.="<option value='".$row['id']."'>".$row['username']."-".$row['phone']."</option>";
    }
    echo $str;
}else{
  	echo "1";
}

最后尚有一个提交操纵,靠山post.php措施来获取最终提交的项的值。

$selID=$_POST['liOptionms2side__dx'];
if(!empty($selID)){
	$str=implode(",",$selID);
    echo $str;
}else{
	echo "没有选择任何项目!";
}

留意,我们获取的是右边列表框liOptionms2side__dx的值,而不是liOption的值。

好了,到这里,一个查询、操纵的例子已经实现,可是尚有一点点瑕疵,在待选区往已选区添加项目时,怎样判定节制已经添加过的项目不能一再添加。假如你有步伐,接待一路商议。

本文地址:http://itbyc.com/php/13291.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1