首頁 > 文章 > 後端開發 > php怎麼實現二級聯動選單

php怎麼實現二級聯動選單

藏色散人原創: 2021-03-26 09:56:562869瀏覽

php實作二級連動選單的方法：首先建立好HTML檔案和PHP檔案；然後寫前端程式碼以及後端邏輯程式碼；接著向後台發送一個請求；最後將值用JS呈現在頁面中即可。

php怎麼實現二級聯動選單

本文操作環境：windows7系統、PHP7.1版，DELL G3電腦

PHP ajax實作二級連動選單功能範例

如何實現二級連動

工作原理

二級連動在開發中是比較常見的一個技術點，它主要運用了JS的局部刷新技術ajax,不同於一般頁面全局刷新，它只會刷新我們需要改變值的地方，我們首先看下它的工作流程。

第一步：我們會向後台發送一個請求
第二步：後台接受請求後，會回傳給我們一個值
第三步：將值以JS呈現在頁面中

HTML程式碼

<html>
<head>
<title>www.jb51.net 二级联动</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=&#39;address&#39;>
      <option value="0">请选择省份</option>
      <option value="1">四川</option>
      <option value="2">河北</option>
      <option value="3">湖南</option>
    </select>
    <select class="area-select" id="city">
      <option>请选择城市</option>
    </select>
  </p>
  <script>
  $(function(){
    //初始化数据
    var url = &#39;address.php&#39;; //后台地址
    $("#address").change(function(){ //监听下拉列表的change事件
      var address = $(this).val(); //获取下拉列表选中的值
      //发送一个post请求
      $.ajax({
        type:&#39;post&#39;,
        url:url,
        data:{key:address},
        dataType:&#39;json&#39;,
        success:function(data){ //请求成功回调函数
          var status = data.status; //获取返回值
          var address = data.data;
          if(status == 200){ //判断状态码，200为成功
            var option = &#39;&#39;;
            for(var i=0;i<address.length;i++){ //循环获取返回值，并组装成html代码
              option +=&#39;<option>&#39;+address[i]+&#39;</option>&#39;;
            }
          }else{
            var option = &#39;<option>请选择城市</option>&#39;; //默认值
          }
          $("#city").html(option); //js刷新第二个下拉框的值
        },
      });
    });
  });
  </script>
</body>

【推薦學習：PHP影片教學】

#PHP程式碼

<?php
  $key = $_POST[&#39;key&#39;]; //获取值
  $address[1] = array(&#39;成都&#39;,&#39;绵阳&#39;,&#39;德阳&#39;);
  $address[2] = array(&#39;石家庄&#39;,&#39;唐山&#39;,&#39;秦皇岛&#39;);
  $address[3] = array(&#39;长沙&#39;,&#39;株洲&#39;,&#39;湘潭&#39;);
  if(!empty($address[$key])){ //有值，组装数据
    $result[&#39;status&#39;] = 200;
    $result[&#39;data&#39;] = $address[$key];
  }else{ //无值，返回状态码220
    $result[&#39;status&#39;] = 220;
  }
  echo json_encode($result); //返回JSON数据
?>

運行效果：

#其實三級連動和二級連動的原理都是一樣的，只是在其基礎上在重複一次而已

以上是php怎麼實現二級聯動選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php ajax html JS

陳述：

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

上一篇：如何解決php post資料遺失問題下一篇：如何解決php post資料遺失問題

看更多