1.在使用input页面加载script的引用

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

注意:必须使用jquery

<script src="js/jquery-3.2.0.min.js"></script>

Html结构:<div data-toggle="distpicker" class="clearfix down">

    <div class="form-group">
        <select class="form-control"  id="province1"></select>
    </div>
    <div class="form-group">
        <select class="form-control"  id="city1"></select>
    </div>
</div>

2.若想获取省市的传递值

在html页面加入一个:

<input name="competition_area" type="hidden" value="" id="competition_area">

在js加上:

var select = $(".form-control").find("option:selected").text();
var o = document.getElementById("competition_area");
o.value = select;

在form表单提交时就会提交上

$('#form').serialize()

competition_area= “”

省际联动distpicker插件的使用讲解的更多相关文章

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

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

  2. 省市区地址三级联动jQuery插件Distpicker使用

    插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...

  3. jQuery Distpicker插件 省市区三级联动 动态赋值修改地址

    在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...

  4. 移动端省际联动插件mobiscroll

    <link href="assets/css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" typ ...

  5. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  6. v-distpicker 一个好用的三级联动的插件

    // 引入插件npm install v-distpicker --save import VDistpicker from 'v-distpicker' Vue.component('v-distp ...

  7. vue 引用省市区三级联动(插件)

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

  8. 关于jQuery插件imgAreaSelect基础讲解

    关于ImgAreaSelect,  是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:h ...

  9. jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

随机推荐

  1. docker中国区镜像加速

    [root@syzyy ~]# vim /etc/docker/daemon.json { "registry-mirros":[ "https://registry.d ...

  2. VS2010-MFC(工具栏:工具栏的创建、停靠与使用)

    转自:http://www.jizhuomi.com/software/217.html 上一节教程讲了工具栏资源及CToolBar类,本节继续讲解工具栏的相关知识,主要内容包括工具栏的创建.停靠与使 ...

  3. CSS 继承和优先级

    CSS继承性 CSS属性继承:外层元素的样式,会被内层元素进行继承. 多个外层元素的样式,最终都会“叠加”到内层元素上. 什么样的CSS属性能被继承呢? CSS文本属性都会被继承的: color. f ...

  4. Python 迭代器与生成器及装饰器

    1.迭代器(Iterator) 迭代器是访问集合元素的一种方式.有下面特点: 1)每次调用__next__()方法只访问一个元素,而且不能后退,便于循环比较大的数据集合,节省内存:(当容器中没有可访问 ...

  5. docker registry (私有仓库)

    首先要导入registry的镜像文件 1.普通的registry 一条命令创建一个仓库 docker run -d -p 5000:5000 --restart=always --name regis ...

  6. substring常用的两种方法

    1.public String substring(int beginIndex, int endIndex) 第一个参数int为开始的索引,对应String数字中的开始位置, 第二个参数是截止的索引 ...

  7. 按指定规则统计list中数据,groupby用法

    有的情况下,只是想要简单地对list中数据,进行分组,查看,可以考虑使用groupby 代码: # groupby需要排序后才能使用 def gb(num): if 0 <= num < ...

  8. 关于切片/截取(slice)和random模块的使用(实例:猜单词小游戏)

    切片和random的使用在源码中都有注释(可以直接下载):https://github.com/NoobZeng/GuessWords 1. README.MD 基于Python的猜单词游戏 猜单词小 ...

  9. Caffe系列2——Windows10制作LMDB数据详细过程(手把手教你制作LMDB)

    Windows10制作LMDB详细教程 原创不易,转载请注明出处:https://www.cnblogs.com/xiaoboge/p/10678658.html 摘要: 当我们在使用Caffe做深度 ...

  10. 记mysql 启动不了了的解决方法

    系统: centos7 本地的环境,mysql启动不了,查看 /var/log/mysqld.log 有以下内容 2018-12-24T08:05:38.090527Z 0 [Warning] TIM ...