PHP Mysql jQuery查询和列表框选择操作示例说明

本文解释了如何通过ajax查询mysql数据，将返回的数据显示在待选列表中，最后通过选择将选项添加到所选区域，可以在很多后台管理系统中使用。这个列表框的操作依赖于jquery插件。

超文本标记语言

form id=' sel _ form ' action=' post . PHP ' method=' post ' pin put type=' text ' name=' keys ' id=' keys ' value='输入您的姓名或手机号码' onclick='this.value='''/。type=' button ' id=' search option ' value=' search '/span id=' msg _ ser '/span/p div id=' sel ' select name=' lio option[]。id=' lio option ' multiple=' multiple ' size=' 8 '/select/div input type=' submit ' value=' submit '/form description，HTML内容是在其中放置了查询输入框、列表框和相关按钮的表单。

MYSQL数据表结构。

如果不存在则创建表` 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是一个联系人信息表，包括姓名和手机号码字段。

半铸钢钢性铸铁(Cast Semi-Steel)

Link rel='样式表' type=' text/CSS' href=' jquery。多选2 Side . css '/在这个例子中，只加载多选插件需要的样式文件，其他CSS可以自己设计。首先，JAVASCRIPT需要引用这个例子所需的两个js文件。

脚本类型=' text/JavaScript ' src=' http : js/jquery . js '/脚本脚本脚本类型=' text/JavaScript ' src=' http : js/jquery . multiselect 2 side . js '/Script rel='样式表'类型=' text/CSS' href=' jquery。多选2 ide . CSS '/然后我们调用多选插件。

$(' # lio option ')。多选2边({选定位置： '右'，moveoptions 3360 false，labelsx: '待选'，labelsx: '已选' })；然后，我们用Ajax编写搜索按钮来查询数据。

$('#searchOption ')。单击(function(){ var keys=$('#keys ')。val()；$.Ajax ({type:' post '，url:' action.php '，data:' title=' keys，success 3360 function(msg){ if(msg==1){ $(' # msg _ ser ')。显示()。);} else { $(' # LioOptionMS2 Side _ _ sx ')。html(msg)；$('#msg_ser ')。html(“”)；} } });$('#msg_ser ')。ajaxSend(函数(事件、请求、设置){ $(this)。html(“”)；});});说明：点击搜索按钮，执行Ajax异步操作。JAVASCRIPT将搜索框的输入值发布到后台程序action.php进行处理。处理后，它会向JAVASCRIPT返回不同的结果。如果返回1，HTML页面会提示“无记录”；否则，结果将输出到左侧列表框(待选):liooptions2side _ _ sx。注意重点。为什么列表框不是一个从XHTML中分离出来的liOption，而是一个liOptionms2side _ _ sx？从多选插件开始，多选插件实际上将一个列表框替换为左右两个列表框，这两个列表框已经用于相关操作。通过查看它的插件代码不难发现。左侧列表框名为liooptions2side _ _ sx，右侧列表框(选中)名为liooptions2side _ _ dx，稍后会用到。

服务器端编程语言（Professional Hypertext Preprocessor的缩写）

让我们首先看看action.php的处理。第一步是连接到数据库。

$conn=mysql_connect('localhost '，' root '，' ')；mysql_select_db('demo '，$ conn)；MySQL _ query(' SET name UTF8 ')；第二步：读取数据并输出。通过检测搜索框中的值，构造不同的SQL语句并将数据返回到输出。代码如下：

$ keys=trim($ _ POST[' title '])；$ keys=MySQL _ real _ escape _ string($ keys，$ conn)；if(！empty($ keys)){ $ SQL=' select * from t _ mult，其中用户名如“%$keys%”或phone=' $ keys}else{ $sql='从t_mult中选择* '；} $ query=MySQL _ query($ SQL)；$ count=MySQL _ num _ rows($ query)；if($ count 0){ while($ row=MySQL _ fetch _ array($ query)){ $ str。='选项值=' '。$row['id']'''.$row['username']。'-'.$row['phone']。/option '；} echo $ str} else { echo ' 1}最后是提交操作，后台post.php程序获取最终提交项的值。

$ SelID=$ _ POST[' LioOptionMS2 Side _ _ dx ']；if(！empty($ selID)){ $ str=inter decd('，'，$ selID)；echo $ str}else{ echo '没有选择任何项目！}请注意，我们在右侧列表框中获得了liOptionms2side _ _ dx的值，而不是liOption的值。已经实现了一个查询操作的例子，但是还是有一点瑕疵。在选定区域添加项目时，如何判断和控制已经添加的项目不能重复添加？让每个人都考虑一下，尝试任何好的解决方案。