美高梅娱乐场网站简单的ThinkPHP 二级联动

发布时间:2019-07-14  栏目:计算机教程  评论:0 Comments

在网上看了很多关于thinkphp二级联动的文章,但我个人感觉写的都不是很简单,有些繁琐,下面是我写的一个简单的二级联动。本人是新手
高手可以不用往下看了.

由于项目的需求需要写一个地区联动的功能,在网上找了一个地址库,放到了数据库中弄了大半天终于实现了想要的功能。废话不多说了将源码发出来。

html文件:

查找出省级城市

liandong.html

“执行代码:

首先要引入jquery.js文件

 代码如下

<html>

<?php

<title>二级联动</title>

$area =M(“Area”);

<head>

$privince = $area->where(“region_type =
1”)->select();

<script src=”__PUBLIC__/scripts/jquery.js”
type=”text/javascript”></script>

$this->assign(“privince”,$privince);

<script type=”text/javascript”>

?>

 $(function(){
        $(‘#AreaId’).change(function(){
            //获取父类的id
            var $id=$(‘#AreaId’).val();

javascript代码:

           //通过ajax进行传值

 代码如下

            $.getJSON(‘__URL__/liandong’,{id:$id},function(data){

<script type=”text/javascript”>
var xmlHttp;
var requestType=””;
function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp=new XMLHttpRequest();
    }
}

                //回调函数
                if (data.status==1){ 

function handleStateChange(){
    if(xmlHttp.readyState==4)
        {
        if(xmlHttp.status==200)
            {
            if(requestType==”city”){
                                showcity();
                            }
            else if(requestType=”area”){
                                    showarea();
                                }
            }
        }
}

                  
//首先清除子类中值不为空的,如果没有这句话你会发现子类的显示会这个增加,二不是你想要的结果
                    $(‘#ServerId option[value!=””]’).remove();

function queryCity(citycode){
    createXMLHttpRequest();
    requestType=”city”;
    var
url=”/esoxue.php/Crm/area/provincecode/”+citycode+”/”+Math.random();
    xmlHttp.open(“GET”,url,true);
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.send(null);
   
}

                    //计算返回数组的数目,并循环显示

function queryArea(citycode){
    createXMLHttpRequest();
    requestType=”area”;
    var
url=”/esoxue.php/Crm/area/citycode/”+citycode+”/”+Math.random();
    xmlHttp.open(“GET”,url,true);
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.send(null);
}
function showcity(){
 
document.getElementById(“city”).innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据
}
function showarea(){
   
document.getElementById(“area”).innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据
}
</script>

                    for (var i=0;i<=data.data.length;i++) {

html代码:

                        
//定义html标签,和显示的值,id和type_name为数据库中的字段名

<div class=”controls”>
<select name=”area[]”
onchange=’queryCity(this.options[this.selectedIndex].value)’>
<option value=”0″>请选择地区</option>
<volist name=”privince” id=”vo”>
<option
value=”{$vo.region_id}”>{$vo.region_name}</option>
</volist>
</select> 
<span id=’city’></span> 
<span id=’area’></span> 
</div>
执行代码:

                         var option =”<option
value=”+data.data[i].id+”>”+data.data[i].type_name+”</option>”;

public function area()
{
$area =M(‘Area’);
$provincecode=$_GET[‘provincecode’];//接收省键值
$citycode=$_GET[‘citycode’];//接收城市键值
if($provincecode !=””){
$citys=$area->where(“parent_id=’$provincecode'”)->select();
echo “<select name=’area[]’
onchange=’queryArea(this.options[this.selectedIndex].value)’>”;
echo “<option value=’-1′ selected>请选城市</option>n”;
    foreach ($citys as
$key=>$val ){
 echo “<option
value='{$citys[$key][‘region_id’]}’>{$citys[$key][‘region_name’]}</option>”;
   }
}
if($citycode!=””){
$areas=$area->where(“parent_id=’$citycode'”)->select();
if(!empty($areas)){
echo “<select name=’area[]’>n”;
echo “<option value=’-1′ selected>请选择县</option>n”;
   foreach ($areas as $key=>$val ){
echo “<option
value='{$areas[$key][‘region_id’]}’>{$areas[$key][‘region_name’]}</option>”;
    }
    echo “</select>n”;
}else{
$areaname =$area->where(“region_id
=’$citycode'”)->field(‘region_name’)->find();
echo “<select name=’area[]美高梅娱乐场网站,’>n”;
echo “<option value=’-1′ selected>请选择县</option>n”;
echo “<option value='{$areaname[‘region_name’]}’
selected>{$areaname[‘region_name’]}</option>”;
echo “</select>n”;
}
}
}

                                //显示的位置
                                $(option).appendTo(‘#ServerId’);
                    }
                }
            });
        });
    });

效果图如下:

</script>

美高梅娱乐场网站 1jquery18305617892363434878=”45″
/>

</head>

最终效果图:

<body>

美高梅娱乐场网站 2

<select id=”AreaId” name=”AreaId”>
                <option selected=”selected”
value=””>请选择游戏区</option>
                <?php

 

                //循环显示父类
                foreach($plei as $val){
                ?>
                <option
value=”{$val[id]}”>{$val[type_name]}</option>
                <?php
                }
                ?>
            </select>

<select id=”ServerId” name=”ServerId”>
            <option selected=”selected”
value=””>请选择游戏服</option>          
            </select>

留下评论

网站地图xml地图