溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

php實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法

發(fā)布時(shí)間：2021-03-26 10:03:42 來源：億速云 閱讀：486 作者：小新 欄目：編程語言

小編給大家分享一下php實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

php實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法：首先創(chuàng)建好HTML文件和PHP文件；然后編寫前端代碼以及后端邏輯代碼；接著向后臺(tái)發(fā)送一個(gè)請(qǐng)求；最后將值用JS呈現(xiàn)在頁(yè)面中即可。

PHP+ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單功能示例

如何實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)

工作原理

二級(jí)聯(lián)動(dòng)在開發(fā)中是比較常見的一個(gè)技術(shù)點(diǎn)，它主要運(yùn)用了JS的局部刷新技術(shù)ajax,不同于一般頁(yè)面全局刷新，它只會(huì)刷新我們需要改變值的地方，我們首先看下它的工作流程。

  • 第一步：我們會(huì)向后臺(tái)發(fā)送一個(gè)請(qǐng)求

  • 第二步：后臺(tái)接受請(qǐng)求后，會(huì)返回給我們一個(gè)值

  • 第三步：將值用JS呈現(xiàn)在頁(yè)面中

HTML代碼

<html>
<head>
<title>www.jb51.net 二級(jí)聯(lián)動(dòng)</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}
.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}
</style>
<head>
<body>
  <p id="area-box">
    <select class="area-select" id='address'>
      <option value="0">請(qǐng)選擇省份</option>
      <option value="1">四川</option>
      <option value="2">河北</option>
      <option value="3">湖南</option>
    </select>
    <select class="area-select" id="city">
      <option>請(qǐng)選擇城市</option>
    </select>
  </p>
  <script>
  $(function(){
    //初始化數(shù)據(jù)
    var url = 'address.php'; //后臺(tái)地址
    $("#address").change(function(){ //監(jiān)聽下拉列表的change事件
      var address = $(this).val(); //獲取下拉列表選中的值
      //發(fā)送一個(gè)post請(qǐng)求
      $.ajax({
        type:'post',
        url:url,
        data:{key:address},
        dataType:'json',
        success:function(data){ //請(qǐng)求成功回調(diào)函數(shù)
          var status = data.status; //獲取返回值
          var address = data.data;
          if(status == 200){ //判斷狀態(tài)碼，200為成功
            var option = '';
            for(var i=0;i<address.length;i++){ //循環(huán)獲取返回值，并組裝成html代碼
              option +='<option>'+address[i]+'</option>';
            }
          }else{
            var option = '<option>請(qǐng)選擇城市</option>'; //默認(rèn)值
          }
          $("#city").html(option); //js刷新第二個(gè)下拉框的值
        },
      });
    });
  });
  </script>
</body>

PHP代碼

<?php
  $key = $_POST['key']; //獲取值
  $address[1] = array('成都','綿陽','德陽');
  $address[2] = array('石家莊','唐山','秦皇島');
  $address[3] = array('長(zhǎng)沙','株洲','湘潭');
  if(!empty($address[$key])){ //有值，組裝數(shù)據(jù)
    $result['status'] = 200;
    $result['data'] = $address[$key];
  }else{ //無值，返回狀態(tài)碼220
    $result['status'] = 220;
  }
  echo json_encode($result); //返回JSON數(shù)據(jù)
?>

運(yùn)行效果：

php實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法

其實(shí)三級(jí)聯(lián)動(dòng)和二級(jí)聯(lián)動(dòng)的原理都是一樣的，只是在其基礎(chǔ)上在重復(fù)一次而已

以上是“php實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手