無限級聯動下拉框地區分類選擇的實現--超傻瓜，超弱智式

時間 2019-11-21

標籤無限級聯下拉地區分類選擇實現傻瓜弱智简体版

原文原文鏈接

1、功能概要

很少說，先上圖：

這種地址下來選擇框常常都會在開發中遇到，那麼若是咱們對這種地址的選擇方式提出兩個要求：

1. 選擇的地區信息是須要動態變動的，便是能夠經過後臺添加地區信息，並從數據庫中動態地讀取出來；

2. 當選擇某一省或某一市的時候，該地址下的子地區也須要同時動態更新，而且是三級聯動更新的。

若是可以實現以上的兩個需求，那麼不管是從地區分類的管理上或者是用戶的體驗上都是很是實用和容易被人接受的。

下面就分享一下我是如何實現這個功能。

2、開發思路

實現這個功能，咱們須要幾樣東西：

1. 一個存放地址分類的 數據表。

2. 當選擇某一地區信息時，用於觸發加載該分類的子分類數據的事件及 事件處理函數。

3. 請求子類數據的地址及對應的得到子類的 請求函數。

我想先來整理一下思路：

1. 設計存放地址分類的數據表 ;

2. 先從視圖出發，構造「帶有觸發加載子類下拉框事件」的頂級分類的下拉框;

3. 編寫事件函數，肯定子類數據請求地址，使用ajax動態向請求子類數據 ;

4. 編寫請求函數。

3、代碼解析

代碼下載：http://ishare.iask.sina.com.cn/f/33878000.htmljavascript

附件中代碼的安裝方法：

1. 先建立數據庫，默認爲area，把sql目錄下的category.sql導入到area數據庫中

2. 修改database_connect.php中的數據庫信息爲對應的數據庫信息。

3. 瀏覽器請求運行index.php

如下針對各個文件的代碼解釋：

1. 數據庫結構 category.sql

--------------------------------------------

| cate_id | parent_id | name |

--------------------------------------------

代碼：

CREATE TABLE IF NOT EXISTS `category` (
  `cate_id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) NOT NULL DEFAULT '0',
  `name` varchar(128) NOT NULL,
  PRIMARY KEY (`cate_id`),
  UNIQUE KEY `cate_id` (`cate_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=25 ;

說明：cate_id 用於存放當期地區分類的id，parent_id用於存放父類id，name爲地區分類的名字php

2. database_connect.php

代碼：

<?php

$host = 'localhost';
$database = 'area';
$login = 'root';
$pass = '';

$dbconnect = mysql_connect($host, $login, $pass);
if (!$dbconnect) { die("數據庫連接出錯！"); } 
mysql_query("set names utf8", $dbconnect);
mysql_select_db($database, $dbconnect);

?>

這裏很少說，就是連接數據庫，你們都懂

3. getArea.php

該文件用於處理動態請求，接收請求提交的cate_id，而後返回該cate_id下的子類數據

<?php

include "database_connect.php"; // 包含數據庫連接操做文件

$cate_id = isset($_POST['cate_id']) ? (int)$_POST['cate_id'] : -1;  // 得到提交參數cate_id

$sql = "SELECT `cate_id`, `parent_id`, `name` FROM category WHERE `parent_id` = {$cate_id};";  // 把參數cate_id做爲父類id查找其子類全部地區分類

$result = mysql_query($sql, $dbconnect);

while($row = mysql_fetch_array($result))
{
    $categories[] = $row; // 把結果放如一維數組中
}

if (!empty($categories)) {  
    echo json_encode($categories);  // 把結果以json加密，以json對象返回結果
} else {
    return false; 
}

?>

4. index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Multi Area Select</title>
    
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.min.js"></script>

</head>
<body>

<?php

/**
 * database connect 
 */
include "database_connect.php";

/**
 * 查找頂級地址分類（parent_id = 0） 
 */
$sql = "SELECT `cate_id`, `parent_id`, `name` FROM category WHERE `parent_id` = 0;";
$result = mysql_query($sql, $dbconnect);
while($row = mysql_fetch_array($result))
{
    $categories[] = $row;
}

?>

<!-- 此處必須加上onchange事件和事件函數ajaxGetArea()，以便當選擇時觸發 -->
<select onchange="ajaxGetArea(this)" name="cate_id" id="area"> 

    <?php foreach ($categories as $cate): ?>
    <option value="<?php echo $cate['cate_id']?>"><?php echo $cate['name'];?></option>
    <?php endforeach;?>

</select>

<script type="text/javascript">

jQuery(function($) {
    ajaxGetArea($("#area")); // 先執行一次，以便顯示全部地區信息
});

/**  
 * 動態加載地區信息
 * @params  obj
 */
function ajaxGetArea(obj)
{
    /**
     * 請求地址 
     */
    var link = "getArea.php";
    /**
     * 請求數據 
     */
    $.post(
        link,
        { 
            /**
             * 參數 
             */
            cate_id : $(obj).val() 
        },
        function(data) 
        {
            /**
             * 清除子類的select
             */
            $(obj).nextAll("select").each(function() {
                $(this).remove();
            });

            if (data) {

                /**
                 * 構造子類select的html 
                 */
                var select = null;
                select = "<select name=\"cate_id\" onchange=\"ajaxGetArea(this)\">"; // 此處注意添加onchange事件
                $.each(data, function(key, item) {
                    select += "<option value="+item.cate_id+">"+item.name+"</option>";
                });
                select += "</select>";

                /**
                 * 插入到右側 
                 */
                $(obj).after(select);

                /**
                 * 觸發下一個子類select的動態加載
                 */
                $(obj).next('select').trigger('change', function() {
                    ajaxGetArea($(this)); // 此處實現遞歸
                });

                /**
                 * 更新name的位置 
                 */
                $(obj).removeAttr('name');
                $(obj).next('select').attr('name', 'cate_id');
            }
        },
        'json' 
    );
}

</script>
    
</body>
</html>

4、總結

功能以簡單的方式實現，實現了基本的地址分類選擇，是常見和經常使用的功能。

實現方法整體來講只分兩個點： 1. 動態請求地址分類數據 2. 得到數據後變動當前數據，同時以遞歸的方式實現多級聯動