插件下载地址

http://www.jq22.com/jquery-info8054

效果如下:

使用:

1.引入js

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

<script src="js/distpicker.data.js"></script>

<script src="js/distpicker.js"></script>

<script src="js/main.js"></script>

2.根据demo示例,写div

<div data-toggle="distpicker">

    <select id="eprovinceName" data-province="浙江省" name="provinceName"></select>

    <select id="ecityName" data-city="杭州市" name="cityName"></select>

    <select id="edistrictName" data-district="西湖区" name="districtName"></select>

</div>

3.用户选择值value的获取

<script>
$("#tijiao").click(function(){
var province = $("#eprovinceName").find("option:selected").text();  
var city = $("#ecityName").find("option:selected").text();  
var district = $("#edistrictName").find("option:selected").text();  
console.log(province);
console.log(city);
console.log(district);
});

</script>

完整代码如下:

<!DOCTYPE html>

<html lang="zh">

<body>

<div data-toggle="distpicker">

    <select id="eprovinceName" data-province="浙江省" name="provinceName"></select>

    <select id="ecityName" data-city="杭州市" name="cityName"></select>

    <select id="edistrictName" data-district="西湖区" name="districtName"></select>

</div>

	<input type='button'  value="提交"  id='tijiao'>

</body>	

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

<script src="js/distpicker.data.js"></script>

<script src="js/distpicker.js"></script>

<script src="js/main.js"></script>

<script>

	$("#tijiao").click(function(){

		var province = $("#eprovinceName").find("option:selected").text();

		var city = $("#ecityName").find("option:selected").text();

		var district = $("#edistrictName").find("option:selected").text();

		console.log(province);

		console.log(city);

		console.log(district);

	});

</script>

</html>

特别注意:提交表单是,不需要上面那么麻烦

直接在select上加name属性即可

<select data-province="北京市" class="select" name="province"></select>

<select data-city="北京市市辖区" class="select" name="city"></select>

<select data-district="顺义区" class="select" name="district"></select>

省市区地址三级联动jQuery插件Distpicker使用的更多相关文章

  1. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. 中国省市区地址三级联动插件---jQuery Distpicker

    插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...

  3. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  4. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

  5. 省市区(县)三级联动代码（js 数据源）

    ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...

  6. JavaScript实现省市区的三级联动

    JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  7. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

  8. vue 引用省市区三级联动（插件）

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

  9. jQuery插件 distpicker实现多次赋值

    项目里需要实现省市区联动选择功能,使用了一个jQuery插件dispicker,记录一下使用过程中遇到的问题和解决办法. 需要要实现的功能就两个:打开modal框时设置地址,点击重置按钮时重置地址 原 ...

随机推荐

  1. pytest 11 allure2生成html报告

    allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest框架,也可以集成到Jenkins上展示高大上的报告界面. 环境准备 1.pyt ...

  2. os.listdir()、os.walk()和os.mkdir()的用法

    内容主要参照博客https://blog.csdn.net/xxn_723911/article/details/78795033 http://www.runoob.com/python/os-wa ...

  3. [USACO10DEC] Treasure Chest

    题目链接 90 Points:智障的区间 DP--设 dp[i][j] 表示区间 [i, j] 能取的最大价值,但我还是 sd 地开了第三维表示先取还是后取的价值. 交上去以为能 A,结果 #2 开心 ...

  4. css at @ 规则

    css相信我们都不陌生,但是我们真的对它非常了解吗? css主要分为两种规则组成: 一种被称为 at-rule,也就是 at 规则 另一种是 qualified rule,也就是普通规则 今天让我们来 ...

  5. 网页三剑客之CSS

    1.CSS概述 CSS中文简称层叠样式表(英文全称:Cascading Style Sheets),用来控制页面的表现,即使页面更好看的语言. 2.CSS基本语法和页面引用 2.1 css的定义方法 ...

  6. 使用SO_REVTIMEO套接字选项为recvfrom设置超时

    void dg_cli(FILE *fp, int sockfd, const SA *pservaddr, socklen_t servlen) { int n; ]; struct timeval ...

  7. Scrapy 入门

    Scrapy https://docs.scrapy.org/en/latest/intro/overview.html Scrapy is an application framework for ...

  8. jpa @onetomany 级联查询时会有重复数据,去重问题

    自己是直接查出来然后利用set去重(自己感觉不是太好,不过能达到目的) List<CampaignDashboardDimensionDo> list = query.getResultL ...

  9. python3 asyncio-协程模块测试代码

    import time import asyncio #统计运行时间的装饰器 def run_time(func): def wrapperfunc(*argv, **kwargv): now = l ...

  10. Spring系列(一) Spring的核心

    Spring 简介 Spring 是一个开源轻量级企业应用架构,目的是为了简化企业级应用开发.(1)Spring 框架可以帮我们管理对象的生命周期,帮助我们管理对象间的依赖关系,相互协作:(2)Spr ...