码迷,mamicode.com
首页 > Web开发 > 详细

0621jQuery练习:三级联动

时间:2018-06-21 21:11:42      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:ble   cal   trap   事件   select   三级   pat   ini   cti   

技术分享图片

技术分享图片

技术分享图片

HTML部分============================================================================================

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="../bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
</head>
<body>
    <div class="sanji"></div>
</body>
</html>
<script type="text/javascript">
//    入口函数
    $(document).ready(function(){
        var attr = "<select id = ‘sheng‘></select><select id = ‘shi‘></select><select id = ‘qu‘></select>";
        $(".sanji").html(attr);
        sheng();
//        通过下拉菜单#sheng的change事件触发函数shi()和qu()
        $("#sheng").change(function(){
            shi();
            qu();
        });
        $("#shi").change(function(){
            qu();
        })
    })
    function sheng(){
//        省的编号都为0,没有父级
        var myid = "0";
        var shengstr = "";
        $.ajax({
            type:"post",
            url:"sjldcl.php",
            async:true,
            data:{
                myid:myid
            },
            dataType:"json",
            success:function(data){
                for (var i =0;i<data.length;i++) {
                    shengstr +="<option value = ‘"+data[i][0]+"‘>"+data[i][1]+"</option>";
                }
                $("#sheng").html(shengstr);
//                在此处调用函数shi()是因为执行完函数sheng()才可获得#sheng元素的value值
//                如果想把函数shi()放到入口函数中,则需要把$.ajax的async改为false
//                执行完函数sheng()获得#sheng的value值后再执行函数shi()
                shi();
            }
        });
    }
    function shi(){
//        获取#sheng的value值,为#shi的编号
        var myid = $("#sheng").val();
        var shistr = "";
        $.ajax({
            type:"post",
            url:"sjldcl.php",
            async:true,
            data:{
                myid:myid
            },
            dataType:"json",
            success:function(data){
                for (var i =0;i<data.length;i++) {
                    shistr +="<option value = ‘"+data[i][0]+"‘>"+data[i][1]+"</option>";
                }
                $("#shi").html(shistr);
                qu();
            }
        });
    }
    function qu(){
//        获取#shi的value值,为#qu的编号
        var myid = $("#shi").val();
        var qustr = "";
        $.ajax({
            type:"post",
            url:"sjldcl.php",
            async:true,
            data:{
                myid:myid
            },
            dataType:"json",
            success:function(data){
                for (var i =0;i<data.length;i++) {
                    qustr +="<option value = ‘"+data[i][0]+"‘>"+data[i][1]+"</option>";
                }
                $("#qu").html(qustr);
            }
        });
    }
</script>

HTML部分^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

PHP部分============================================================================================

<?php
    $conn = new mysqli("localhost","root","","ceshi2");
    $conn->connect_error?die():"";
    $myid = $_POST[‘myid‘];
    $sql = "select * from dt_area where area_parent_id = {$myid}";
    $resule = $conn->query($sql);
    $attr = $resule->fetch_all();
    echo json_encode($attr);
?>

PHP部分^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

0621jQuery练习:三级联动

标签:ble   cal   trap   事件   select   三级   pat   ini   cti   

原文地址:https://www.cnblogs.com/zhangbaozhong/p/9210793.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!