jquery是实现美化后的省市县区的下联动菜单

 我来答

2个回答

#热议# 普通体检能查出癌症吗？

江易@程序员
2016-01-24 · 知道合伙人IT服务行家

江易@程序员
知道合伙人IT服务行家

采纳数：10 获赞数：138

慧若电子商务有限公司最佳架构师

向TA提问私信TA

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="city.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="1.js"></script>
</head>
<body >
<div id="cityDiv">
<a class="aCity" id="aPro" >请选择省</a>
<a class="aCity" id="aCity">请选择市</a>
<a class="aCity" id="aArea">请选择区县</a>
</div>
</body>
</html>
JavaScript代码如下：
/*
* $.get()或$.post()方法来解析xml文件
* * url：指定要解析的xml文件的路径
* * callback：回调函数，function(xml){}
* * xml：解析xml文件返回的内容
*/
$.get("area.xml", function (xml) {
var docXml = xml;
var $provinceElements = $(docXml).find("province");
var $proEle = $("#cityDiv"); //a链接的div
var $divEle = $("<div class='dropdown_window' id='divPro'></div> ");
var $divEleCity = $("<div class='dropdown_window' style='margin-left:66px;' id='divCity'></div> ");
var $divEleArea = $("<div class='dropdown_window' style='margin-left:144px;' id='divArea'></div> ");
//遍历所有的省，写到第一个div中
$provinceElements.each(function (index, domEle) {
var $provinceValue = $(domEle).attr("name"); //获得省的值
//创建span标签
var $optionElement = $("<a class='ziduan' href='javascript:void(0);' ></a>");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($provinceValue);
//创建div
$divEle.append($optionElement);
});
$("#aPro").click(function () {
//先把市，区隐藏起来
$("#divCity").hide();
$("#divArea").hide();
// alert($("#divPro"));
$proEle.after($divEle);
var $divPro = $("#divPro");//获得div,判断是否显示
if($divPro.is(":hidden")){//如果省的div被隐藏，让他显示
$divPro.attr("style","display:block;");
}
});
//给省添加click事件，获得选中的值，并显示在
$(".ziduan").live('click',function () {
var $clickPro = $(this).text();//获得点击的省的名称
//赋值给省a标签
$("#aPro").text($clickPro);
//隐藏div
$("#divPro").hide();
//创建市的div
var $clickPro = $("#aPro").text();
//获得市div中的内容，清空
$("#divCity").html("");
//市页面上的a标签中的内容变为请选择市
$("#aCity").text("请选择市");
//获得区div中的内容，清空
$("#divArea").html("");
//市页面上的a标签中的内容变为请选择市
$("#aArea").text("请选择区县");
// 遍历省，找到与选中值相同的，得到所有的市
var $flag = true;
$provinceElements.each(function (index, domEle) {
var $provinceValue = $(domEle).attr("name");
if($flag){
if ($clickPro == $provinceValue) {
$flag = false;
var $cityElements = $(domEle).find("city");
//遍历市
$cityElements.each(function (index, domEle){
var $cityValue = $(domEle).attr("name");
//创建option标签
var $optionElement = $("<a class='ziduanCity' href='javascript:void(0);' ></a>");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($cityValue);
//创建div
$divEleCity.append($optionElement);
});
}
}
});
});

//点击市，弹出下拉框
$("#aCity").click(function(){
//先把省，区隐藏起来
$("#divPro").hide();
$("#divArea").hide();
//获得省的内容，如果没有选择就不显示div
var $clickPro = $("#aPro").text();
if($clickPro.indexOf('请选择省')<0){
//已经选择了省
var $divCity = $("#divCity");//获得div,判断是否显示
//alert($divCity);
if($divCity.is(":hidden")){//如果省的div被隐藏，让他显示
$divCity.attr("style","margin-left:66px;display:block;");
}
//添加到body中
$proEle.after($divEleCity);
}
});
//给市添加click事件，获得选中的值，并显示在页面
$(".ziduanCity").live('click',function () {
var $clickCity = $(this).text();//获得点击的市的名称
//赋值给市a标签
$("#aCity").text($clickCity);
//隐藏div
$("#divCity").hide();
var $clickCity = $(this).text();//获得点击的市的名称
var $clickPro = $("#aPro").text();//获得省
//获得区div中的内容，清空
$("#divArea").html("");
//市页面上的a标签中的内容变为请选择市
$("#aArea").text("请选择区县");
// 遍历省，找到与选中值相同的，得到所有的市
var $flag = true;
$provinceElements.each(function (index, domEle) {
var $provinceValue = $(domEle).attr("name");
if ($clickPro == $provinceValue) {
var $cityElements = $(domEle).find("city");
$cityElements.each(function (index, domEle) {
var $cityValue = $(domEle).attr("name");
if ($clickCity == $cityValue) {
var $countyElements = $(domEle).find("county");
$countyElements.each(function (index, domEle) {
var $countyValue = $(domEle).attr("name");
var $optionElement = $("<a class='ziduanErea' href='javascript:void(0);' ></a>");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($countyValue);
//创建div
$divEleArea.append($optionElement);

});
}
});
}
});
});
$("#aArea").click(function(){
//先把省市隐藏起来
$("#divPro").hide();
$("#divCity").hide();
//获得省的内容，如果没有选择就不显示div
var $clickPro = $("#aPro").text();
var $clickCity = $("#aCity").text();
if($clickPro.indexOf('请选择省')<0 && $clickCity.indexOf('请选择市')<0 ){
var $divArea = $("#divArea");//获得div,判断是否显示
//alert($divCity);
if($divArea.is(":hidden")){//如果省的div被隐藏，让他显示
$divArea.attr("style","margin-left:144px;display:block;");
}
//添加到body中
$proEle.after($divEleArea);
}
});
//给区添加click事件，获得选中的值，并显示在页面上
$(".ziduanErea").live('click',function () {
//先把省，市隐藏起来
var $clickArea = $(this).text();//获得点击的区的名称
//赋值给省a标签
$("#aArea").text($clickArea);
//隐藏div
$("#divArea").hide();
});

});
CSS代码如下：
{
margin:0;
padding:0;}
.dropdown_window{
background-color: #FFFFFF;
border: 1px solid #CBE3F7;
margin: 0;
padding: 7px 0 15px 15px;
width: 257px;
overflow:hidden;
}
.aCity{
background:url(xiala.jpg) no-repeat scroll right top transparent;
border: 1px solid #7F9DB9;
color: black;
cursor: pointer;
font-size: 12px;
height: 12px;
line-height: 18px;
margin: 0;
padding: 4px 25px 2px 7px;
text-decoration: none;
}
.ziduan{
width:64px;
height:24px;
color: #004B91;
text-decoration: none;
font-size:12px;
line-height:24px;
text-align:center;
display:block;
float:left;
}
.ziduan:hover{
color:#F60;
text-decoration:underline;
}
.ziduanCity{
height:24px;
color: #004B91;
text-decoration: none;
font-size:12px;
line-height:24px;
text-align:center;
display:block;
float:left;
margin-left:5px;
margin-right:5px;
}
.ziduanCity:hover{
color:#F60;
text-decoration:underline;
}
.ziduanErea{
width:auto;
height:24px;
color: #004B91;
text-decoration: none;
font-size:12px;
line-height:24px;
text-align:center;
display:block;
float:left;
margin-left:5px;
margin-right:5px;
}
.ziduanErea:hover{
color:#F60;
text-decoration:underline;
}

本回答由电脑网络分类达人郭强推荐

已赞过 已踩过<

评论收起

一骑当后
推荐于2016-06-04 · 知道合伙人数码行家

一骑当后
知道合伙人数码行家

采纳数：40299 获赞数：306428

网络、设备维护、电路、弱电检测。

向TA提问私信TA

关注

展开全部

闲着没事，于是用php和jquery写了个联动菜单，没想到用jquery这么快。

<?php
// 自己写的一个ajax的省市联动
// 数据表为ecshop里的region表，省份、城市信息都在这个表里存着

    $conn = mysql_connect("localhost", "root", "123456") or die ('链接数据库出错'.mysql_error());
    mysql_select_db("ecshop", $conn) or die ('选择表出错');
    mysql_query("set names 'utf8'");

// ajax 操作 获取城市
    if (isset($_POST['provice'])) {
        $id = isset($_POST['provice']) ? $_POST['provice'] : '0';

$str = '<option value=0>请选择</option>';
        if ($id != 0) {
            $provice = getProvice($id);
            foreach($provice as $val) {
                $str .= '<option value='.$val['region_id'].'>'.$val['region_name'].'</option>';
            }
        }

        echo $str;
        exit;
    }

    // 获取县城
    if (isset($_POST['city'])) {
        $id = isset($_POST['city']) ? $_POST['city'] : '0';
        
        $str = '<option value=0>请选择</option>';
        if ($id != 0) {
            $provice = getProvice($id);
            foreach($provice as $val) {
                $str .= '<option value='.$val['region_id'].'>'.$val['region_name'].'</option>';
            }
        }

        echo $str;
        exit;
    }

function getProvice($id=1)
    {
        $sql = "SELECT * FROM ecs_region WHERE parent_id = '{$id}' ";
        $query = mysql_query($sql);

        $arr = array();
        while($row = mysql_fetch_array($query)) {
            $arr[] = $row;
        }

        return $arr;
    }
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市联动</title>

<script src="jquery/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function(){
    
    // 选择不同的省的时候
    $("#provice").change(function(){
        var provice = $("#provice").val();

        // 省份不为0时点击的时候需要将city和town都清空
        // 省份点击 ’请选择‘的时候也需要将city和town清空，
        // 如果不清空会出现选‘请选择'的时候第三个下拉框还会有上一次保留的值

        if (provice != 0) {
            $.ajax({
               type: "POST",
               url: "liandong.php",
               data: "provice="+provice,
               success: function(msg){
                
                 $("#city").css("display", "");
                 $("#city").empty();
                 $("#town").empty();
                 $("#city").append(msg);
               }
            });
        } else {
            $("#city").css("display", "none").empty();
            $("#town").css("display", "none").empty();
        }
    });

    // 选择不同的城市的时候
    $("#city").change(function(){
        var city = $("#city").val();
        $.ajax({
           type: "POST",
           url: "liandong.php",
           data: "city="+city,
           success: function(msg){
             $("#town").css("display", "");
             $("#town").empty();
             $("#town").append(msg);
           }
        });
    });
})
</script>
</head>

<body>

<div id="provice_body" style="width:400px;">
省份：<select name="provice" id="provice">
            <option value="0">请选择</option>
        <?php
            $provice = getProvice();
            foreach($provice as $val) {
                echo '<option value='.$val['region_id'].'>'.$val['region_name'].'</option>';
            }
        ?>
      </select>
<select name="city" id="city" style="display:none">
</select>

<select name="town" id="town" style="display:none">
</select>

</div>
</body>
</html>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jquery是实现美化后的省市县区的下联动菜单

其他类似问题

为你推荐：