PHP Mysql jQuery query and list box selection operation example explanation, jquery example explanation_PHP tutorial

PHP Mysql jQuery query and list box selection operation example explanation, jquery example explanation

This article explains how to query mysql data through ajax and display the returned data in the selection list , and then finally add the option to the selected area by selecting it, which can be used in many background management systems. The operation of the list box in this article relies on the jquery plug-in.

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> 

Explanation, the HTML content is a form, which contains a query input box, a list box, and related buttons.

MYSQL data table structure

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; 

Table t_mult is a contact information table, including name and mobile phone number fields.

CSS

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

In this example, only the style files required by the Multiselect plug-in are loaded. You can design other CSS by yourself.
JAVASCRIPT
First you need to reference the two js files required for this example.

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

Then let’s call the Multiselect plug-in.

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

Then let’s write a search button to perform Ajax query data.

$("#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(""); 
  }); 
}); 

Explain that when the search button is clicked, an Ajax asynchronous operation is performed. JAVASCRIPT will pass the input value of the search box obtained to the background program action.php in POST mode for processing. After processing, different results will be returned to JAVASCRIPT. If 1 is returned, the HTML page will prompt "No record". Otherwise, the result will be output to the left list box (to be selected): liOptionms2side__sx. NoteThe key point is here, Why is the list box not XHTML's liOption, but liOptionms2side__sx? This starts with the Multiselect plug-in. The Multiselect plug-in actually replaces a list box with two left and right list boxes for related operations. It is not difficult to find by looking at the plug-in code. The name of the list box on the left is: liOptionms2side__sx , the right list box (selected) is named: liOptionms2side__dx, which will be used later.

PHP

First let’s look at the processing of action.php.
The first step is to connect to the database.

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

The second step is to read the data and output it. Construct different SQL statements by detecting the value passed by the search box, and return the data for output. The code is as follows:

$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"; 
} 

Finally there is a submission operation, the background post.php program to obtain the value of the final submitted item.

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

Note that what we get is the value of liOptionms2side__dx of the right list box, not the value of liOption.
An example of query and operation has been implemented, but there is still a little flaw. When adding items to the selected area, how to judge and control that the items that have been added cannot be added again. This is left to everyone to think about. Give it a try. What a good solution.