当前位置:首页 > 网页设计 >Javascript >

jQuery城市选择插件

发布时间:2020-07-10 16:09:05 作者:佚名 阅读:(367)

最近在做一个项目用到了jQuery城市选择插件,城市选择插件在很多的项目中都会使用到,接下来吾爱编程为大家分享一下jQuery省市区三级联动插件,有需要的小伙伴可以参考一下:

1、原理:

本插件利用ul模拟美化select选择框,最终选择的值会赋值到隐藏的hidden域里面,在数据提交的时候传给对应的接口

2、部分代码:

<div id="content-left" class="demo">
  <form action="" name="form1">
    <div class="infolist">
      <lable>所在地区:</lable>
      <div class="liststyle"> <span id="Province"> <i>请选择省份</i>
        <ul>
          <li><a href="javascript:void(0)" alt="请选择省份">请选择省份</a></li>
        </ul>
        <input type="hidden" name="cho_Province" value="请选择省份">
        </span> <span id="City"> <i>请选择城市</i>
        <ul>
          <li><a href="javascript:void(0)" alt="请选择城市">请选择城市</a></li>
        </ul>
        <input type="hidden" name="cho_City" value="请选择城市">
        </span> <span id="Area"> <i>请选择地区</i>
        <ul>
          <li><a href="javascript:void(0)" alt="请选择地区">请选择地区</a></li>
        </ul>
        <input type="hidden" name="cho_Area" value="请选择地区">
        </span> </div>
    </div>
  </form>
</div>

3、效果截图及源码下载:

    

源码下载

以上就是吾爱编程为大家分享的jQuery城市选择插件,了解更多相关文章请关注吾爱编程网!

欢迎分享转载→ jQuery城市选择插件

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们