ThinkPHP和Ajax 實現二級連動的下拉式選單

這篇文章主要介紹了關於ThinkPHP和Ajax 實現二級聯動的下拉菜單，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

聯動菜單的數據存在資料庫，可以隨時透過對資料庫添加刪除修改改變選單數據，而不需修改程式碼，同時，實現了2級後，也可以實現3級，4級。 。 。等關聯選單

首先是資料庫的設計。分類表叫cate.

我做的是分類資料的二級連動，資料需要的欄位有：id,name(中文名),pid(父id).

父id的設定: 若資料沒有上一級，則父id為0，若有上級，則父id為上一級的id。

資料庫有內容後，就可以開始寫程式碼，進行二級連動的實作。

先在後台php取得所有pid為0的數據，儲存到$cate中，然後在第一層的中用foreach循環輸出。

Html程式碼:

<select name="type" size="1" id="type">
    <option>请选择类型</option>
     <foreach name=&#39;cate&#39; item=&#39;v&#39;>
         <option value="{$v[&#39;ca_id&#39;]}">{$v.ca_name}</option>
     </foreach>
 </select>
 标签：
 <select name="lable" size="1" id="lables">
 </select>

Ajax程式碼：

 $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value=&#39;"+data[i].ca_id+"&#39;>"+data[i].ca_name+"</option>";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

Ajax程式碼在第一層型別改變後觸發,ajax方法的主要參數有

      1 .url:後台接收ajax的位址；

      2.data:傳到後台的數據，一般用json傳遞；這裡傳遞的是選取類別的id值。

      3.type:傳遞方法，有get和post方法，我一般用post,可以傳送的資料比get多，安全性也高一點；

##      4.error:ajax執行失敗的方法；

      5.success:ajax執行成功的方法，也就是回呼函數。這裡在執行success時，我先用empty()清空了第二個下拉式選單的內容，然後再輸出從背景取得的資料。

下面是Thinkphp接收ajax資料並處理的頁面、

//后台ajax验证
  $result = array();
  $cate =$_POST['type'];
  $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
  $this->ajaxReturn($result,"JSON");

Thinkphp的I()方法其實可以看成$_POST[],這樣來取得ajax傳遞過來的第一層選中內容的id，接著，獲取其子類，然後用ajaxReturn()返回給ajax,這裡設置了返回數據以json形式，所以ajax會以json形式接收到數據

原生php的返回數據方式:

程式碼如下:

  //搜索结果为$result
   .....
   echo json_encode($result);

這樣就完成了2級連動下拉式選單的實現，需要注意的是，url得保證正確，後台接收到也需要有回傳值，不然ajax也不會執行success方法的。

以上就是這篇文章的全部內容了，感謝大家的閱讀，更多內容請關注PHP中文網！

相關推薦：

##PHP實作的訊息即時推播功能【基於反ajax推送】

##在Thinkphp中使用ajax實作無刷新分頁的方法

#

以上是ThinkPHP和Ajax 實現二級連動的下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）

1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最佳圖形設置

1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信條陰影：貝殼謎語解決方案

2 週前 By DDD

R.E.P.O.如果您聽不到任何人，如何修復音頻

1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.聊天命令以及如何使用它們

1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7542

15

CakePHP 教程

1381

52

steam的賬戶名稱是什麼格式

83

11

win11激活密鑰永久

55

19

NYT連接提示和答案

21

86

顯示更多

Related knowledge

thinkphp專案怎麼運行 Apr 09, 2024 pm 05:33 PM

執行 ThinkPHP 專案需要：安裝 Composer；使用 Composer 建立專案；進入專案目錄，執行 php bin/console serve；造訪 http://localhost:8000 查看歡迎頁面。

thinkphp有幾個版本 Apr 09, 2024 pm 06:09 PM

ThinkPHP 擁有多個版本，針對不同 PHP 版本而設計。主要版本包括 3.2、5.0、5.1 和 6.0，而次要版本用於修復 bug 和提供新功能。目前最新穩定版本為 ThinkPHP 6.0.16。在選擇版本時，需考慮 PHP 版本、功能需求和社群支援。建議使用最新穩定版本以獲得最佳性能和支援。

thinkphp怎麼運行 Apr 09, 2024 pm 05:39 PM

ThinkPHP Framework 的本機運作步驟：下載並解壓縮 ThinkPHP Framework 到本機目錄。建立虛擬主機（可選），指向 ThinkPHP 根目錄。配置資料庫連線參數。啟動 Web 伺服器。初始化 ThinkPHP 應用程式。存取 ThinkPHP 應用程式 URL 運行。

解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資

解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤

laravel和thinkphp哪個好 Apr 09, 2024 pm 03:18 PM

Laravel 和 ThinkPHP 框架的效能比較：ThinkPHP 效能通常優於 Laravel，專注於最佳化和快取。 Laravel 性能良好，但對於複雜應用程序，ThinkPHP 可能更適合。

thinkphp怎麼安裝 Apr 09, 2024 pm 05:42 PM

ThinkPHP 安裝步驟：準備 PHP、Composer、MySQL 環境。使用 Composer 建立專案。安裝 ThinkPHP 框架及相依性。配置資料庫連線。產生應用程式碼。啟動應用程式並造訪 http://localhost:8000。

如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

See all articles

公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們 免責聲明 Sitemap

© php.cn All rights reserved