• 省市区三级联动及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);
    

      

  • 相关阅读:
    DOCTYPE和namespace
    由浅入深漫谈margin属性
    checkbox的完美用户体验
    XSL 属性模板的运用
    各浏览器里默认的表单控件(form controls)
    简单form标准化实例(二):语义结构
    zindex在IE中的迷惑(二)
    最简单的清除浮动的方法
    Default style sheet for HTML 4
    PNG透明背景图片的无界应用
  • 原文地址:https://www.cnblogs.com/forqiwen/p/8891175.html
Copyright © 2020-2023  润新知