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);
    });

    }

  • 相关阅读:
    复杂网络常用数据集网站
    01单人决策问题
    《无线网络安全技术》阅读笔记
    最优化理论基础
    测试layer控件,除了ie报错其它浏览器都生效
    Native App、Web App、Hybrid App
    有些效果在IE下运行时,IE下开调试模式才显示正常是什么原因?
    关于Content-Type中application/x-www-form-urlencoded 和 multipart/form-data的区别及用法
    js表单提交的三种方式
    前端涉及的所有知识体系
  • 原文地址:https://www.cnblogs.com/-flq/p/10307722.html
Copyright © 2011-2022 走看看