网站用什么软件程序做,网站建设 个人模板下载,万网网,汇款账号 网站建设这篇文章主要介绍了PHPMysqljQuery查询和列表框选择操作实现过程#xff0c;需要的朋友可以参考下本文讲解如何通过ajax查询mysql数据#xff0c;并将返回的数据显示在待选列表中#xff0c;再通过选择最终将选项加入到已选区#xff0c;可以用在许多后台管理系统中。本文列…这篇文章主要介绍了PHPMysqljQuery查询和列表框选择操作实现过程需要的朋友可以参考下本文讲解如何通过ajax查询mysql数据并将返回的数据显示在待选列表中再通过选择最终将选项加入到已选区可以用在许多后台管理系统中。本文列表框的操作依赖jquery插件。HTML说明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)) ENGINEMyISAM DEFAULT CHARSETutf8;表t_mult是一张联系人资料表包括姓名和手机号码字段。CSS本例中只加载了Multiselect插件所需的样式文件其他CSS大家可以自行设计。JAVASCRIPT首先需要引用本例所需的两个js文件。接着我们来调用Multiselect插件。$(#liOption).multiselect2side({selectedPosition: right,moveOptions: false,labelsx: 待选区,labeldx: 已选区});然后我们来写搜索按钮进行Ajax查询数据的操作。$(#searchOption).click(function(){var keys$(#keys).val();$.ajax({type: POST,url: action.php,data: titlekeys,success: function(msg){if(msg1){$(#msg_ser).show().html(没有记录);}else{$(#liOptionms2side__sx).html(msg);$(#msg_ser).html();}}});$(#msg_ser).ajaxSend(function(event, request, settings){$(this).html();});});说明当点击搜索按钮时进行的是Ajax异步操作JAVASCRIPT将获取的搜索框的输入值以POST方式传递给后台程序action.php处理处理后返回不同的结果给JAVASCRIPT如果返回1HTML页面会提示“没有记录”反之则将结果输出给左边列表框(待选区)liOptionms2side__sx。注意关键的地方到了为什么列表框不是XHTML离的liOption而变成了liOptionms2side__sx了呢这个要从Multiselect插件说起Multiselect插件其实就是将一个列表框装换成左右两个列表框已供相关操作通过查看其插件代码不难发现左边的列表框名为liOptionms2side__sx右边列表框(已选区)名为liOptionms2side__dx后面会用到。PHP首先来看action.php的处理。第一步是连接数据库。$connmysql_connect(localhost,root,);mysql_select_db(demo,$conn);mysql_query(SET names UTF8);第二步读取数据并输出。通过检测搜索框传来的值构造不同的SQL语句并将数据返回输出代码如下$keystrim($_POST[title]);$keysmysql_real_escape_string($keys,$conn);if(!empty($keys)){$sqlselect * from t_mult where username like %$keys% or phone$keys;}else{$sqlselect * from t_mult;}$querymysql_query($sql);$countmysql_num_rows($query);if($count0){while($rowmysql_fetch_array($query)){$str..$row[username].-.$row[phone].;}echo $str;}else{echo 1;}最后还有一个提交操作后台post.php程序来获取最终提交的项的值。$selID$_POST[liOptionms2side__dx];if(!empty($selID)){$strimplode(,,$selID);echo $str;}else{echo 没有选择任何项目;}注意我们获取的是右边列表框liOptionms2side__dx的值而不是liOption的值。一个查询、操作的例子实现了但是还有一点点瑕疵在待选区往已选区添加项目时如何判断控制已经添加过的项目不能重复添加这个就留给大家思考吧试一试有什么好的解决方式。
