说明：
1、开发环境 vs2012 asp.net mvc4 c#
1、效果图
2、html 前端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="MvcAppTest.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="ewJS/jquery.js"></script>
<style type="text/css"> .SelectItem { border:1px solid red;
} .UNSelectItem {
/*border:none;*/ border:1px solid #73b2ff;
} .resultHTML { width:370px; height:200px; float:left; background-color:#73b2ff; color:white; z-index:1001; position:absolute; display:none; padding:10px 0px 0px 10px;
} .span1 { width:60px; font-size:18px; line-height:32px; height:32px; cursor:pointer;
}
</style>
<script type="text/javascript">
var countItem = 1; $(function () { test02(); $(".span1").hover(function () { //var test3 = $("#span01").text();
if (countItem>1) { var display = $('#resultHTML').css('display'); if(display == 'none') { $("#resultHTML").css('display', 'block'); } } else { console.log('不是某某市'); } }, function () { }); $('#resultHTML').hover(function () { }, function () { var display = $('#resultHTML').css('display'); if (display == 'block') { $("#resultHTML").css('display', 'none'); } }); }); function test02() { var userName = '1'; var IsCity = false; var IsQu = false; var userData = { username: '100', pwd: '888888', officeID: -1 };//一定要写在外面
$.ajax({ type: 'post', url: 'Home/Getdata', dataType: 'json', data: userData, success: function (result) { if (result.length > 1) { countItem = result.length; }; var str = "<div>"; var item1 = "<div id='divCity' style='margin-bottom:5px;'>"; if (userName == "1") { item1 += '<span area="0" id="' + -1 + '" style=" font-size:16px;font-weight:bold;cursor:pointer;" onclick="test03(' + -1 + ', ' + '\'某某市\'' + ')" >' + '某某市' + '</span>'; IsCity = true; } item1 += "</div>"; str += item1; var item2 = "<div id='divTown' style='font-size:14px;'>"; $.each(result, function (i, value) { //if (value.IsALL != 1) {
item2 += '<span area="' + value.MapId + '" id="' + value.id + '" style="cursor:pointer;line-height:25px;display:block;float:left;margin-right:20px;" onclick="test03(' + value.id + ',' + '\'' + value.Name + '\'' + ')">' + value.Name + "</span>"; //}
}); item2 += "</div>"; str += item2; str += "</div>"; $("#resultHTML").append(str); if (result.length != 1) { test03('-1'); $('#span01').html('<span style="height:31px;line-height:31px;font-size:18px;">某某市</span>'); } else { $('#dsj').hide(); test03(result[0].id); $('#span01').html('<span style="height:31px;line-height:31px;font-size:18px;">' + result[0].Name + '</span>'); } }, error: function (ex) { //debugger;
// alert('error');
Console.log("Getdata方法执行错误" + ex); } }); } function test03(officeID, OfficeName) { $('#span01').html('<span style="height:31px;line-height:31px;font-size:18px;">' + OfficeName + '</span>'); var ItemDiv = document.getElementsByTagName("span"); $.each(ItemDiv, function (i, value) { if (ItemDiv[i] != null) { if (ItemDiv[i].getAttribute("id") != null) { ItemDiv[i].className = "UNSelectItem"; } } }); var selectedModel = document.getElementById(officeID); selectedModel.className = 'SelectItem'; } </script>
</head>
<body>
<div style="width:400px;height:31px;margin-bottom:10px;background-color:#73b2ff;color:white;line-height:31px;">
<span id="span01" class="span1">某某市</span><img id="dsj" style="margin-left:10px;" src="img/dsj.png" />
</div>
<div id="resultHTML" class="resultHTML"></div>
</body>
</html>
3、Home控制器 后台代码
[HttpPost] public JsonResult Getdata(string username, string pwd, string officeID) { int officeId = Convert.ToInt32(officeID); int data1 = Convert.ToInt32(username); List<townModel> myList = new List<townModel>(); for (int i = 1; i < 30;i++ ) { townModel model= new townModel(); model.id = i; model.IsALL = i + 1; model.MapId = "100" + i.ToString(); model.Name = "乡镇"+i.ToString(); myList.Add(model); } return Json(myList, JsonRequestBehavior.DenyGet); }
public class townModel { public Int32 id { get; set; } public string Name { get; set; } public Int32 IsALL { get; set; } public string MapId { get; set; } }
4、箭头图片
5、文件下载
链接：https://pan.baidu.com/s/1m5zayibZnIYCARTKJ65rjQ
提取码：15nl