位置: 编程技术 - 正文
DIV+CSS+jQ实现省市联动可扩展(jquery控制css样式)
编辑：rootadmin推荐整理分享DIV+CSS+jQ实现省市联动可扩展(jquery控制css样式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery控制css样式,css省略,jq css(),css设置省略号,jq控制css样式,jq css(),div css js,css省略,内容如对您有帮助，希望把文章链接给更多的朋友！
公司的省市县数据比较坑爹，是通过ehr系统那边生成ID来匹配，比如福建省 对应ID AOP，城市也对应一个ID，然后区县就不管了。然后我就网上找了一堆资源 插件什么的感觉都不适用就决定自己写一个。因为自己也是半桶水的那种界面都不知道怎么弄，弄哪种格式，什么风格，配色啊。就默默的找了京东、亚马逊、淘宝、当当等他们关于省市区是怎么做的。图如下：
最后我结合一下做了如下图：
废话不多说上源码：
页面布局：
脚本：
逻辑就是要先选国内或者国外，三角形就是图片，不是h5 canvas画出来的，这种图片网上多的是。
1、我用input 类型button 作为图片容器，用img图片居然出不来（可能我水吧）。input有默认样式按钮点击外面有蓝色的边框，要去掉outline:none;不要像我一样写成out-line
2、感觉自己在写面向过程一样，按三角形加载全部信息，切换图片，再点图片就关闭成。里面有些逻辑就是自由扩展，不要国外的就把国外有关代码删掉，要扩展就添加类似 省 市。
3、动态加载数据就是 比如 省份 对应的div 类名为liDiv1,它的盒子结构
动态数据 ss 可以通过ajax获取数据库数据 经过后台遍历拼接
比如说以下是 .net 的写法（写的比较low不要介意）把他传到前端 ajax接收返回的值，直接append到$('.liDiv3').html(ss);就获取到动态数据
获取数据，点击福建省 就可以写通用的click事件，后台拼接的onclick="getLi(this)"
在前端就写上
然后这样就获取到省份的 text id ，通过click事件可以获取到 城市的数据 同样加载 id和text。在拼接文本到 最上面的输入框就是最终结果 （这个还没写，很简单，懒癌发作了不想写了），对了上面的文本已经设置了只读readonly，说到只读 就要说到 readonly 和disabled 的区别了，readonly只对 输入框还有多文本输入框有效，而且文本样式不会更改。disabled 基本试用与所有元素，但是要注意的它的兼容性。上面的文本框设置了runat属性 是为了方便.net后台直接读取数据。
jQuery soColorPacker 网页拾色器 未采用生僻的jquery特性，能兼容jquery1.2.6以上所有版本实例预览引入文件linktype="text/css"rel="stylesheet"media="all"href="soColorPacker/css/style.css"/scripttype="text/javascr
浅析jQuery Ajax通用js封装 本文大概分为三步实现jqueryajax通过js封装，通过代码实例讲解，代码附有注释，比较容易理解，具体详情如下所示：第一步：引入jQuery库scripttype="text/jav
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一） 内容滑动切换应用非常广，常见的有幻灯片焦点图、画廊切换等。随着WEB前端技术的广泛应用，内容滑动切换效果占据着web页面重要地位，因此本站Hello
标签: jquery控制css样式
本文链接地址:https://www.jiuchutong.com/biancheng/385878.html 转载请保留说明！
