PHP實現二級聯動

阿新 • • 發佈：2019-02-19

如何實現二級聯動

工作原理

二級聯動在開發中是比較常見的一個技術點，它主要運用了JS的區域性刷新技術ajax,不同於一般頁面全域性重新整理，它只會重新整理我們需要改變值的地方，我們首先看下它的工作流程。
第一步：我們會向後臺傳送一個請求
第二步：後臺接受請求後，會返回給我們一個值
第三步：將值用JS呈現在頁面中

HTML程式碼

<html>
<head>
<title>
二級聯動
</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>
    <div 
 id="area-box">
        <select class="area-select" id='address'>
            <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>
    </div>
    <script>
    $(function(){
        //初始化資料
        var url = 'address.php'; //後臺地址
        $("#address").change(function(){  //監聽下拉列表的change事件
            var address = $(this).val();  //獲取下拉列表選中的值
            //傳送一個post請求
            $.ajax({
                type:'post',
                url:url,
                data:{key:address},
                dataType:'json',
                success:function(data){  //請求成功回撥函式
                    var status = data.status; //獲取返回值
                    var address = data.data;
                    if(status == 200){  //判斷狀態碼，200為成功
                        var option = '';
                        for(var i=0;i<address.length;i++){  //迴圈獲取返回值，並組裝成html程式碼
                            option +='<option>'+address[i]+'</option>';
                        }
                    }else{
                        var option = '<option>請選擇城市</option>';  //預設值
                    }

                    $("#city").html(option);  //js重新整理第二個下拉框的值
                },
            });
        });
    });
    </script>
</body>

PHP程式碼

<?php
    $key = $_POST['key'];  //獲取值
    $address[1] = array('成都','綿陽','德陽');
    $address[2] = array('石家莊','唐山','秦皇島');
    $address[3] = array('長沙','株洲','湘潭');

    if(!empty($address[$key])){ //有值，組裝資料
        $result['status'] = 200;
        $result['data'] = $address[$key];
    }else{  //無值，返回狀態碼220
        $result['status'] = 220;
    }


    echo json_encode($result);  //返回JSON資料
?>

這裡寫圖片描述

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

jQuery+php實現二級聯動

view fun val -- where his this pre public php代碼： public function liandong(){ $arr = Db::table("city")->where("pid=0")->sel

PHP實現二級聯動

如何實現二級聯動工作原理二級聯動在開發中是比較常見的一個技術點，它主要運用了JS的區域性刷新技術ajax,不同於一般頁面全域性重新整理，它只會重新整理我們需要改變值的地方，我們首先看下它的工作流程。第一步：我們會向後臺傳送一個請求第二步：後臺接受

AJAX+PHP實現三級聯動

lec hang implode clas success cti 部分點擊事件 ces 利用ajax實現頁面地區選擇三級聯動效果圖如下當選擇相應省份時，對應顯示出所有相關城市和地區的下拉選擇來看下如何實現的 html頁面部分 <!DOCTYPE htm

用js和jq分別實現二級聯動效果

js jq 二級聯動界面：兩個下拉框。用js方法實現:用jq方法實現:註意：在js中的for(var a in 數組) 其中的變量a依舊是下標，不是元素的值，跟其他的語言有點不一樣。同時，在js中，數組的下標是可以存放文字的。用js和jq分別實現二級聯動效果

jquery+php實現select聯動效果(兩級聯動)

HTML程式碼： <div class="form-group">

jquery+ajax實現二級聯動

實現效果圖：前臺頁面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery+ajax實現二級聯動</title>

jquery實現二級聯動

這兩天一直在看jquery實現二級聯動於是自己結合網上的編寫了一個小demo 程式碼如下：首先引入jquery 其次編寫頁面: <body> <select id="checkE"> <option value="">請選擇種

JS實現二級聯動 (createTextNode，createElement )

JS中只有陣列，沒有集合陣列長度=角標+1 長度可變 cities[0],cities[1],cities[2],cities[3] cities[100] 長度是101 而不是5 <!DO

winfrom 窗體控制元件實現二級聯動 ComboBox繫結資料來源時觸發SelectedIndexChanged事件的處理辦法

ComboBox繫結資料來源時觸發SelectedIndexChanged事件的處理辦法事件，而這個時候使用者並沒有選擇內容，其SelectedValue也不是對應欄位的值。那麼時寫在SelectedIndexChanged中的處理程式碼就會因為SelectedValue的內容不正確引發異常。一般網上找到

winfrom 窗體控件實現二級聯動

內容感謝標記 init bob and uri play 用兩個事件，而這個時候用戶並沒有選擇內容，其SelectedValue也不是對應字段的值。那麽時寫在SelectedIndexChanged中的處理代碼就會因為SelectedValue的內容不正確引發異常。一

select選單實現二級聯動

<tr> <th>執行人<b>*</b></th> <td> <select name="

用js+html5實現二級聯動省份下拉選單

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二級聯動省份下拉框</title> </head> &

利用ajax實現二級聯動下拉框

下拉框二級聯動，用ajax來實現是已經非常成熟的技術了。但對於我這個java菜鳥來說，真的是費了九牛二虎之力，各種百度，各種測試。終於得以實現。程式碼相對於網上的容易理解些。現把程式碼和我在編寫的過程中遇到的問題貼出來，對自己也是一個總結，同時也希望能幫助到跟我一樣的菜鳥。

easyui下拉框實現二級聯動

原理：第一陣列正常展示，根據選中的選項將選項下的陣列賦給下一複選框 theGetData = data["linkage"];//ajax請求回來的 $.each(theGetData,functi

利用js實現二級聯動的簡單例項

此例項是一個簡單的二級聯動，第一個列表中的值為固定的，第二個列表中的值隨著第一個列表值的變化而變化，即第一個列表影響第二個列表。實現思路：先寫兩個<select>標籤，用name或id來區分；寫一個二維陣列來存放資訊；在一級選單中使用onchange()事件來動態

datagrid中的editor,combobox動態新增資料來源,實現二級聯動的辦法(更新中)

但當我結束這一行編輯的時候，顯示的不是combobox的text，而是顯示的是combobox的value 請問，我該如何處理，才能讓結束編輯後，顯示的是combobox的text？求解！各位大仙！一下是區域性程式碼： XML/HTML code? 1 2 3 4

關於springMVC結合mybatis,thymeleaf,實現二級聯動

廢話不多說直接上程式碼吧 1、這是我的下拉列表中二級聯動部署，這裡採用的是thymeleaf模板引擎，所有遍歷集合方法有點不一樣，之前看了很多程式碼沒有一點用，然後自己試出來了。 2、點了一下商品範圍後到controller,這裡需要說明的是這個controlle

省份城市實現二級聯動效果

vue實現二級聯動效果

區域紐約 select doctype use sel height www over 你如城市與省份間的二級聯動效果 <!DOCTYPE html> <html> <head> <meta charset="UTF

jquery $.post() 向php傳值實現簡單的二級聯動

chang var box jquer lec 簡單 cnblogs encode can 1 其中selectid是一個下拉菜單的id 2 3 $().ready(function () { 4 $("#selectid").change(functi

PHP實現二級聯動

如何實現二級聯動

工作原理

HTML程式碼

PHP程式碼

相關推薦