(Advanced) PHP+Mysql+jQuery implements query and list box selection operations

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

<form id="sel_form" action="post.php" method="post"> 
   <p><input type="text" name="keys" id="keys" value="输入姓名或手机号码" onclick="this.value=&#39;&#39;" /> 
    <input type="button" id="searchOption" value="搜索" /> <span id="msg_ser"></span></p> 
   <div id="sel"> 
   <select name="liOption[]" id=&#39;liOption&#39; multiple=&#39;multiple&#39; size=&#39;8&#39;> 
   </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.

<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.

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 we write the 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 obtained input value of the search box to the background program action.php in POST mode for processing. After processing, different values ​​will be returned. The result is given 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. Note that the key point is here. Why is the list box not the liOption of XHTML, 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 list box on the left is named: liOptionms2side__sx, and the list on the right is The name of the box (selected) is: 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 reads the data and outputs it. By detecting the value passed by the search box, construct different SQL statements, and return the data to the 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=&#39;".$row[&#39;id&#39;]."&#39;>".$row[&#39;username&#39;]."-".$row[&#39;phone&#39;]."</option>"; 
    } 
    echo $str; 
}else{ 
      echo "1"; 
}

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

$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 in the right list box, not the value of liOption.

The above is the content of (advanced article) PHP+Mysql+jQuery to implement query and list box selection operations. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!