幽灵资源网

DIV+CSS+jQ实现省市联动可扩展
网络编程 2025/10/25 佚名
3 2
幽灵资源网 Design By www.bzswh.com

公司的省市县数据比较坑爹，是通过ehr系统那边生成ID来匹配，比如福建省 对应ID 01211014AOP145，城市也对应一个ID，然后区县就不管了。然后我就网上找了一堆资源 插件什么的感觉都不适用就决定自己写一个。因为自己也是半桶水的那种界面都不知道怎么弄，弄哪种格式，什么风格，配色啊。就默默的找了京东、亚马逊、淘宝、当当等他们关于省市区是怎么做的。图如下：

DIV+CSS+jQ实现省市联动可扩展
DIV+CSS+jQ实现省市联动可扩展

DIV+CSS+jQ实现省市联动可扩展

DIV+CSS+jQ实现省市联动可扩展

DIV+CSS+jQ实现省市联动可扩展

最后我结合一下做了如下图：

DIV+CSS+jQ实现省市联动可扩展

废话不多说上源码：

<style type="text/css"> 
#divProCity 
{ 
position:absolute; 
width:350px; 
max-height:220px; 
height:auto; 
display:none; 
border:1px solid #d3d3d3; 
z-index:100; 
overflow:auto; 
overflow-x:hidden; 
} 
.headMenu 
{ 
height: 34px; 
background: #f6f6f6; 
margin: 0; 
padding: 0; 
} 
.headMenu li 
{ 
float:left; 
text-align:center; 
width:60px; 
height: 32px; 
list-style:none; 
background: #f6f6f6; 
line-height: 32px; 
font-size: 13px; 
cursor: pointer; 
} 
.headMenu li.liDefault 
{ 
background: #F60; 
color: #fff; 
margin: 0; 
padding: 0; 
} 
.liDiv1, .liDiv2 
{ 
height: auto; 
min-height:30px; 
border-top: 2.5px solid #F60; 
margin-top: -2px; 
} 
.liDiv3 
{ 
height:auto; 
min-height:30px; 
max-height:200px; 
border-top: 2px solid #F60; 
margin-top: -2px; 
} 
.liDiv2,.liDiv3 
{ 
display: none; 
} 
.liDiv1 ul, .liDiv2 ul 
{ 
padding: 2px; 
margin: 0; 
clear:both; 
} 
.liDiv3 ul 
{ 
padding: 2px; 
margin: 0; 
clear:both; 
} 
.liDiv1 ul li, .liDiv2 ul li 
{ 
float:left; 
font-size: 14px; 
width:60px; 
line-height:180%; 
list-style:none; 
color: #252525; 
margin: 0 4px; 
cursor:pointer; 
text-align:center; 
} 
.liDiv3 ul li 
{ 
float:left; 
font-size: 13px; 
line-height: 150%; 
color: #252525; 
margin: 1px 3px; 
list-style: none; 
cursor:pointer; 
text-align:center; 
} 
.liDiv1 ul li:hover, .liDiv2 ul li:hover,.liDiv3 ul li:hover 
{ 
color: #8b51cb; 
cursor: pointer; 
text-decoration: none; 
padding: 0; 
background:#ccc; 
} 
.btn_img1 
{ 
width:20px; 
vertical-align:middle; 
margin-left:-31px; 
border:none; 
outline:none; 
height:10px; 
cursor:pointer; 
background:url(images/img_1.png) no-repeat center center; 
z-index:10; 
} 
.btn_img2 
{ 
margin-left:-31px; 
margin-bottom:2px; 
width:20px; 
height:10px; 
border:none; 
outline:none; 
vertical-align:middle; 
cursor:pointer; 
background:url(images/img_2.png) no-repeat center center; 
z-index:10; 
} 
</style>

页面布局：

<head> 
<title>省市二级联动可扩展性</title> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">


脚本：





<script type="text/javascript"> 
$(document).ready(function () { 
$('#divProCity ul.headMenu li').click(function () { 
var index = $(this).index(); 
//国外点击无效 
if (index == 2) { 
return false; 
} 
$(this).addClass("liDefault").siblings().removeClass("liDefault"); 
$('#divProCity').children('div').eq(index).show().siblings('div').hide(); 
}); 
}) 
//选择国内国外 
$("[name$=radio1]").click(function () { 
var value = $(this).val(); 
//更改国外国内时重置省市的值为空，图标还原,关闭弹层,判断输入框是否可以编辑 
$("input[id*=txt_proCity]").val(''); 
$('#btnImg').attr("class", "btn_img1"); 
$('#btnImg').attr("name", "img1"); //给切换图片做标记的 
$('#divProCity').css("display", "none"); 
if (value == 2) {//国外 
$('#txt_proCity').removeAttr("readonly"); 
} 
else { 
$('#txt_proCity').attr("readonly", "readonly"); 
} 
}) 
//出国模糊查询 
function GetOutCounty() { 
//border: 1px solid #d3d3d3;background: #f6f6f6;备用颜色background: #f7f7f7; 
var txt = $("input[id*=txt_proCity]"); 
if (txt.val().trim()== "") { 
return false; 
} 
var height = txt.height(); 
var x = txt.offset().top; 
var y = txt.offset().left; 
$('#divProCity').css({ display: "block", left: y + "px", top: x + height + 8 + "px" }); 
$('#divProCity ul.headMenu li').eq(2).show().css("width", "70px").addClass("liDefault").siblings().hide(); 
$('#divProCity').children('div').eq(2).show().siblings('div').hide(); 
$('#btnImg').attr("class", "btn_img2"); 
$('#btnImg').attr("name", "img2"); //给切换图片做标记的 
//模糊查询相关代码 
var ss = "<ul><li>福州福州</li><li>福州福州</li><li>福福州州</li><li>福州福州</li></ul>"; 
$('.liDiv3').html(''); 
$('.liDiv3').html(ss); 
} 
//根据国内国外 点击右边按钮加载 
function changeImg() { 
var _selectValue = $("input:checked[name$=radio1]").val(); 
if (_selectValue == "" || _selectValue==undefined) { 
alert("请先选择是否出国！"); 
return false; 
} 
var txt = $("input[id*=txt_proCity]"); 
var height = txt.height(); 
var x = txt.offset().top; 
var y = txt.offset().left; 
var name = $('#btnImg').attr("name"); 
if (name == "img1") { 
$('#btnImg').attr("class", "btn_img2"); 
$('#btnImg').attr("name", "img2"); 
$('#divProCity').css({ display: "block", left: y + "px", top: x + height + 8 + "px" }); 
//1国内 2国外 控制面板菜单项显示 
if (_selectValue == 1) { 
$('#divProCity ul.headMenu li').eq(2).hide().siblings().show(); 
$('#divProCity').children('div').eq(0).show().siblings('div').hide(); 
} 
else { 
$('#divProCity ul.headMenu li').eq(2).show().css("width","70px").addClass("liDefault").siblings().hide(); 
$('#divProCity').children('div').eq(2).show().siblings('div').hide(); 
} 
} 
else { 
$('#btnImg').attr("class", "btn_img1"); 
$('#btnImg').attr("name", "img1"); 
$('#divProCity').css("display","none"); 
} 
} 
</script> 





逻辑就是要先选国内或者国外，三角形就是图片，不是h5 canvas画出来的，这种图片网上多的是。




1、我用input 类型button 作为图片容器，用img图片居然出不来（可能我水吧）。input有默认样式按钮点击外面有蓝色的边框，要去掉outline:none;不要像我一样写成out-line




2、感觉自己在写面向过程一样，按三角形加载全部信息，切换图片，再点图片就关闭成。里面有些逻辑就是自由扩展，不要国外的就把国外有关代码删掉，要扩展就添加类似 省 市。




3、动态加载数据就是 比如 省份 对应的div 类名为liDiv1,它的盒子结构





<div class="liDiv1> <ul> <li></li> </ul> </div>
var ss = "<ul><li>福州福州</li><li>福州福州</li><li>福福州州</li><li>福州福州</li></ul>";
$('.liDiv3').html(''); //添加前先清空
$('.liDiv3').html(ss);





动态数据 ss 可以通过ajax获取数据库数据 经过后台遍历拼接





var ss= <ul><li id="01211014AOP145" onclick="getLi(this)" >福建省</li></ul>





比如说以下是 .net 的写法（写的比较low不要介意）把他传到前端 ajax接收返回的值，直接append到$('.liDiv3').html(ss);就获取到动态数据





if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0) 
{ 
strBuild.Append("<table id=\"tableShow\" class=\"gridtable\" cellspacing='0' >"); 
//strBuild.AppendFormat("<tr><div class=\"dialogTitle1\">" + title3+ "</div><tr>"); 
foreach (DataRow dr in ds.Tables[0].Rows) 
{ 
strBuild.Append("<tr id='" + dr["VALUE"] + "' onmouseover=\"this.bgColor='#FAEBD7'\" onmouseout=\"this.bgColor=''\" onclick=\"ClickOnWorkPlace(this)\" >"); 
strBuild.AppendFormat("<td >{0}</td>", dr["name"].ToString()); 
strBuild.Append("</tr>"); 
} 
strBuild.Append("</table>"); 
} 





获取数据，点击福建省 就可以写通用的click事件，后台拼接的onclick="getLi(this)" 




在前端就写上





function getLi(obj){ 
var id=$(obj).attr("id"); 
var text=$(obj).text(); 
//可以通过省份id 写ajax去获取市的数据 
}





然后这样就获取到省份的 text id ，通过click事件可以获取到 城市的数据 同样加载 id和text。在拼接文本到 最上面的输入框就是最终结果 （这个还没写，很简单，懒癌发作了不想写了），对了上面的文本已经设置了只读readonly，说到只读 就要说到 readonly 和disabled 的区别了，readonly只对 输入框还有多文本输入框有效，而且文本样式不会更改。disabled 基本试用与所有元素，但是要注意的它的兼容性。上面的文本框设置了runat属性 是为了方便.net后台直接读取数据。
标签：
div和css和jq省市联动
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
www.bzswh.com 幽灵资源网
143,552互联网资源
29,117高清电影
46,608技术教程
224,608站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2025/10/25

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
幽灵资源网 Design By www.bzswh.com