`

jQuery省市县联动插件演示

    博客分类:
  • Ajax
阅读更多

    http://blog.csdn.net/longaohun/article/category/792984

彦磊基于jQuery省市县联动插件演示
演示地址:http://www.391zx.com/yl/YlChinaDemo.html
技术支持:http://hi.baidu.com/dpxdqx
下载地址:http://www.jztg.net/yl/YLChinaArea.rar


彦磊基于jQuery省市县联动插件(2009.04)
在IE6/IE7/Mozilla 5.0(Firefox 3.0.5)中测试通过
此插件功能
1、不需要数据库支持,速度快。
2、支持初始设置哪些省市县为选中状态、从而可以有网页编辑页面调用已经保存的数据库数据。
3、在ASP.NET中简单添加D三个HiddenField控件便可以获取前台页面选择的省市县数据。
4、基于REQUERY,表现和行为分离,设置简单方便,详细见使用方法。


此插件要求运行在jQuery v1.3 或更高版本上
插件改编自RayChou(http://www.raychou.com)的“全国省市区三级联动下拉菜单”插件。
更多JQUERY插件请访问彦磊的百度博客:HTTP://HI.BAIDU.COM/DPXDQX,
此为自由拷贝版本,您可以在此基础上添加任何功能
彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享,也建议您保留部分彦磊的信息


使用前您一定要引入jQurey及压缩包中的两个脚本文件,如
<script type="text/javascript" src="js/jquery_last.js"></script>
<script type="text/javascript" src="js/location.js"></script>
<script type="text/javascript" src="js/YlChinaArea.js"></script>
使用方法:

1、为您要设置省市县联动下拉框设置容器,如"ChinaArea"
2、在容器中添加三个select元素,请不要再添加其它任何元素,同时按省、市、县区的顺序安排三个选择框。
<div class="ChinaArea">
     <select id="province" name="province" style="width: 100px;"></select>
     <select id="city" name="city" style="width: 100px;"></select>
     <select id="county" name="county" style="width: 120px;"> </select>       
</div>
在ASP.NET中,您需要多添加三个服务器控件:隐藏字段,您选择的省市县数据将在客户端由程序分别写入三个隐藏字段中
请您注意三个隐藏字段按顺序分别存储省、市、县区的数据,顺序不能随意调整,同时您不要在容器中添加其它元素,特别是select和input元素。
<div class="ChinaArea">
      <select id="province" style="width: 100px;"></select>
      <select id="city" style="width: 100px;"></select>
      <select id="county" style="width: 120px;"> </select>
      <asp:HiddenField runat="server" ID="Tprovince" />
      <asp:HiddenField runat="server" ID="TCity" />
      <asp:HiddenField runat="server" ID="TCounty" />
</div>
在asp.net的代码页中您可以通过获取三个隐藏字段的value值来获取您选择的省市县。
3、在页面中添加jQuery语句,调用此插件,并对相关参数进行设置,如:
<script type="text/javascript">
   $(document).ready(function() {
       $("#ChinaArea").jChinaArea();
   });
</script>
4、在ASP.NET中,您需要通过下面语句来调用,即设置参数aspnet的值为true.
<script type="text/javascript">
   $(document).ready(function() {
       $("#ChinaArea").jChinaArea({aspnet:true});
   });
5、初始化时您可以定义选择哪些省市县,如
<script type="text/javascript">  
       $(document).ready(function() {
         $("#ChinaArea").jChinaArea({
             aspnet:true,
             s1:"河南省",//默认选中的省名
             s2:"安阳市",//默认选中的市名
             s3:"文峰区"//默认选中的县区名
         });
       });
   </script>
具体参数:
    aspnet-true或false.默认为false。即是否在ASP.NET中使用,
           如果在asp.net中使用,则设为true,并按照第2步中所说方法添加三个隐藏字段,程序会把选择的内容分别写入三个控件中
           从而使asp.net可以获取您选择的省、市、县区内容。
    s1-默认选中的省名称,在程序中您可以用这个值来初始省份的选中项,如s1:<%=rs("Province")%>
    s2-默认选中的市名称,用法同上。
    s3-默认选中的县区名称,用法同省。

分享到:
评论

相关推荐

    省市区联动jquery插件

    标题中的“省市区联动jquery插件”是指一种用于网页开发的工具,主要用于处理用户在选择省份时,自动更新对应的市和区的选择项,以实现这三个级别行政区划的联动效果。这种插件通常能够提高用户体验,简化用户在填写...

    jquery省市区选择插件,地区选择插件

    jQuery省市区选择插件通常通过Ajax技术从服务器获取省市区数据,然后动态构建三级联动的下拉列表。用户在选择一个省之后,对应的市会自动加载;接着,选择市后,区的信息也会随之更新。这种交互方式既节省了页面加载...

    district是一款jQuery多级下拉菜单联动插件

    district是一款专为jQuery设计的多级下拉菜单联动插件,它旨在简化在网页中创建交互式、层次化的菜单系统。这款插件的核心功能在于实现省市县等多级选择的联动效果,允许用户根据需要进行定制,以适应各种项目的需求...

    jQuery三种省市区多级联动演示与下载

    第一种是四级联动省市区镇,第二种是三级联动,可自定义json数据,第三种是带有数据的省市区三级联动。jquery多级联动插件免费下载。

    jQuery三种省市区多级联动演示与下载.zip

    **jQuery省市区多级联动**是一种常见的前端交互功能,它在网页中用于实现用户选择省份时,自动更新市、区的选择列表,为用户提供便捷的筛选服务。本压缩包中的资源包含了一个基于jQuery实现的此类功能的示例和相关...

    layui省市区联选插件源码

    "layui省市区联选插件"是layui框架下的一款扩展插件,主要用于实现中国省市区三级联动选择的功能,常用于地址输入或者区域筛选等场景。这款插件能够帮助用户在网页上方便快捷地选择或输入省份、城市、区县信息,提高...

    js实现移动端省市区三级联动选择器效果

    在移动端开发中,省市区三级联动选择器是一个常见的功能,用于收集用户所在的...在提供的压缩包文件"city"中,可能包含了用于演示或测试的省市区数据,可以结合这些数据来实践上述方法,进一步完善和优化你的代码实现。

    省市区3级联动纯JS(内含数据)

    “jquery-area.js”是压缩包内的一个文件,这很可能是一个基于jQuery库编写的JavaScript插件,用于实现省市区3级联动的功能。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,使得...

    jQuery-Citys省市区三级菜单联动插件使用详解

    这里分享一个博主写的省市区三级菜单联动插件 — jQuery-Citys,此插件中所有省市区数据均为国家行政区划代码,保证数据真实可靠,插件可以根据默认地区代码或地区名称进行值的初始化操作。 线上演示地址 github地址...

    前端+数据库 四级联动插件

    "四级联动插件"是一种常见的前端组件,它主要用于实现多级选择的联动效果,例如省市县区的选择,常见于地址填写、区域筛选等场景。在本案例中,我们看到一个结合了前端与数据库的四级联动解决方案。 首先,我们来...

    省市级联动静态资源包.zip

    "demo.text" 文件可能是一个演示示例或者使用说明,里面可能包含了如何将cxselect插件与JSON数据结合使用,以实现省市区联动效果的代码片段和步骤。开发者可以通过阅读这个文件来了解如何在自己的项目中集成和配置...

    jq_area地区三级联动插件[参考].pdf

    【jq_area地区三级联动插件】是一种在网页中实现省市区三级联动选择效果的JavaScript插件,主要用于表单中的地址输入,提高用户体验。这个插件基于jQuery库,通过循环遍历预先定义好的地区数据,动态生成下拉选项,...

    仿某宝手机网站选择省市县效果

    【标签】"选择省市县"直接指出了此插件的核心功能,即在网页上实现省、市、县三级联动的选择效果。这种功能在电商、物流、预约服务等需要收集用户详细地址的网站上非常常见。通常,当用户选择一个省份时,下拉菜单会...

    移动端城市联动选择插件

    综上所述,"移动端城市联动选择插件"是一个实用的工具,结合了jQuery的便利性和移动优化的策略,为移动端应用提供了高效的城市选择解决方案。通过深入理解并适配这个插件,开发者可以提升其项目在地理选择方面的用户...

    JS开发中百度地图+城市联动实现实时触发查询地址功能

    area.js是一个实现了省市区三级联动功能的JavaScript插件。它通过预先设定的省市区数据,当用户在省份下拉框中选择一个省份时,城市的下拉框中会自动更新显示该省份下辖的城市;当选择了一个城市后,区域的下拉框中...

    js世界主要国家包括中国地区

    "js世界主要国家包括中国地区"的项目,旨在提供一个能够覆盖全球主要国家以及中国国内省市区的三级联动选择器。这个功能通常用于地址填写、定位服务、物流配送等场景,允许用户方便地选择他们的所在位置。 首先,...

Global site tag (gtag.js) - Google Analytics