zoukankan      html  css  js  c++  java
  • ajax省市县三级联动

    <div class="col-2 offset-2"><label><span>地址:<strong>&#42</strong></span></label></div>
    <div class="col-6" style="display: flex;justify-content: start;">
    <div id="select0"></div>
    <div id="select1"></div>
    <div id="select2"></div>
    <div id="select3"></div>
    </div>

    js

    // 省市县三级联动
    $(function(){
    var ss = "";
    $.get("https://www..com/lxzaixian/provinces/list",function(data){

    var json = eval(data);
    ss = ss + "<select onchange='getAllCity(this)' >";
    ss = ss + "<option>== 请选择省(区、市) ==</option>";
    for ( var i = 0; i < json.data.length; i++) {
    ss = ss + "<option value="+json.data[i].code+">" + json.data[i].name;
    ss = ss + "</option>";
    }
    ss = ss + "</select>";
    $("div#select0").html(ss);

    });
    })

    function getAllCity(obj) {
    console.log(obj.value)
    var ss = "";
    $.get("https://www..com/lxzaixian/cities/listByParentCode/"+obj.value, function(data) {
    var json = eval(data);
    console.log(json.data)
    ss +="<select onchange='getPalce(this)' >";
    ss +="<option>== 请选择城市 ==</option>";
    for ( var i = 0; i < json.data.length; i++) {
    ss += "<option value="+json.data[i].code+">" + json.data[i].name;
    ss += "</option>";
    }
    ss = ss + "</select>";
    $("div#select1").html(ss);

    });
    }

    function getPalce(obj){
    var ss="";
    $.get("https://www..com/lxzaixian/areas/listByParentCode/"+obj.value,function(data){
    var json = eval(data);
    ss +="<select onchange='getPalce1(this)' >";
    ss +="<option>== 请选择县区 ==</option>";
    for ( var i = 0; i < json.data.length; i++) {
    ss += "<option value="+json.data[i].code+">" + json.data[i].name;
    ss += "</option>";
    }
    ss = ss + "</select>";
    $("div#select2").html(ss);
    });

    }

    function getPalce1(obj){
    var ss="";
    $.get("https://www..com/lxzaixian/streets/listByParentCode/"+obj.value,function(data){
    var json = eval(data);
    ss +="<select>";
    ss +="<option>== 请选择街道区 ==</option>";
    for ( var i = 0; i < json.data.length; i++) {
    ss += "<option value="+json.data[i].code+">" + json.data[i].name;
    ss += "</option>";
    }
    ss = ss + "</select>";
    $("div#select3").html(ss);
    });

    }

  • 相关阅读:
    nginx利用image_filter动态生成缩略图
    uva 624 CD 01背包打印路径
    【剑指Offer学习】【全部面试题汇总】
    POJ2096-Collecting Bugs(概率DP)
    配置struts tags 输出HTML
    合并基因表达水平(merge gene expression levels, FPKM)
    设置MySQL自动增长从某个指定的数开始
    列联表(Crosstabs)
    mysql 实现行号的方法——如何获取当前记录所在行号
    shell 标出输入、标准输出、错误输出
  • 原文地址:https://www.cnblogs.com/-flq/p/10307722.html
Copyright © 2011-2022 走看看