PHP + MySQL + jQuery 實現雙向列表框選擇與 AJAX 查詢

本文完整示範：前端輸入關鍵字 → AJAX 查詢 MySQL → 結果填入左側「待選區」 → 使用者雙向移動選項至右側「已選區」 → 表單提交獲取選中值。核心依賴 jQuery Multiselect 插件。

資料庫結構

CREATE TABLE `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;

前端 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>

引入 Multiselect 插件

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

初始化雙向列表框

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

插件會將原單一 <select> 轉換為左右兩個列表框，左側 ID 為 liOptionms2side__sx，右側為 liOptionms2side__dx。

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() { $(this).html(""); });
});

PHP 後端查詢 (action.php)

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

$keys = trim($_POST['title']);
$keys = mysql_real_escape_string($keys, $conn);

$sql = !empty($keys) 
    ? "SELECT * FROM t_mult WHERE username LIKE '%{$keys}%' OR phone='{$keys}'"
    : "SELECT * FROM t_mult";

$query = mysql_query($sql);
if (mysql_num_rows($query) > 0) {
    while ($row = mysql_fetch_array($query)) {
        echo "<option value='{$row['id']}'>{$row['username']}-{$row['phone']}</option>";
    }
} else {
    echo "1";
}

表單提交處理 (post.php)

$selID = $_POST['liOptionms2side__dx']; // 注意：取右側已選區的值
if (!empty($selID)) {
    echo implode(",", $selID);
} else {
    echo "沒有選擇任何項目！";
}

進階優化方向

• 將 mysql_* 函數升級為 mysqli 或 PDO（原函數已棄用）
• 使用 Prepared Statements 防止 SQL 注入
• 前端加入防重複邏輯：移動前檢查右側是否已存在同值選項
• 大量資料時考慮分頁或虛擬滾動