zoukankan      html  css  js  c++  java
  • 省市区三级联动及ajax的str处理方式

    在页面里做一div,设置ID为sanji

    建一个JS文件,将省市区各做一个方法填充到select里面

    // JavaScript Document
    $(document).ready(function(e){
    	var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
    	$("#sanji").html(str);
    	FillSheng();
    	FillShi();
    	FillQu();
    //做一个省的改变方法,将市区填充进去 $("#sheng").change(function(){ FillShi(); FillQu(); })
    //做一个市的改变方法,将区填充进去 $("#shi").change(function(){ FillQu(); }) })
    //填充省的方法 function FillSheng(){ var pcode = "0001";//通过父类代号找到省,用ajax var str = ""; $.ajax({ async:false, url:"dqchuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<option value="+lie[0]+">"+lie[1]+"</option>"; } $("#sheng").html(str); } }) }
    //填充市的方法,首先获取到省的value值,这里的val值是下拉列表<option value值> function FillShi(){ var pcode = $("#sheng").val(); var str = ""; $.ajax({ async:false, url:"dqchuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<option value="+lie[0]+">"+lie[1]+"</option>"; } $("#shi").html(str); } }) } function FillQu(){ var pcode = $("#shi").val(); var str = ""; $.ajax({ url:"dqchuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<option value="+lie[0]+">"+lie[1]+"</option>"; } $("#qu").html(str); } }) }

      dqchuli.php的处理页面

    <?php
    require_once "./dbda/DBDA.class.php";
    $db = new DBDA();
    $pcode = $_POST["pcode"];
    $sql = "select * from chinastates where ParentAreaCode='{$pcode}'";
    echo $db->strquery($sql);
    

      

  • 相关阅读:
    mvc4 to mvc5 orEF5 to EF6 ,(升级EF6)
    mongodb 增删改查
    切换frame
    selenium使用,xpath解析模块,笔记整理在最后# 四套解析数据的方式 # 1.bs4 2.css_selector 3.xpath 4.re,
    爬虫,request,response 属性,方法,2.beautifulsoup解析模块
    爬虫基础知识简单案例
    vue跳转,v-model 双向绑定,-vuex的使用cookie:,视频第三方播放
    分页器,解析器,url控制器,响应器
    正向代理与反向代理
    认证权限频率自定义
  • 原文地址:https://www.cnblogs.com/forqiwen/p/8891175.html
Copyright © 2011-2022 走看看