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. 最大流Dinic算法的一些优化 [网络流][最大流]

    明天省夏要讲网络流啦!晚上翻出自己的模板发现是蓝书模板QwQ..拿出以前的提交代码(AC过的?) 曾经的提交记录 在luogu上重新提交一遍,结果gg...OVO 没有去除多余的inline 去除了多 ...

  2. 运维人员最常用150个linux命令汇总

    命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的帮助,比如cd命令. 文件和目录操作命令(18个) l ...

  3. (转)iframe 高度100%时,出现垂直滚动条

    问题 需求是这样的,iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding.margin的因素外,还是有滚动 ...

  4. Mybatis笔记 – 入门程序开发

    一.Mybatis开发环境 JDK:jdk_1.7 Eclipse:Oxygen.1 Release (4.7.1) MySQL:MySQL Servr 5.7 1.添加相关ja r包 mybatis ...

  5. Docker系列(二):Docker基础命令

    docker的部署安装(Linux kernel至少3.8以上): yum install docker docker1.8安装:(下面 是两个命令) # cat >/etc/yum.repos ...

  6. fastjson 过滤不需要序列化的属性

    JSON JSON英文全称为JavaScriptObject Natation,采用key:value键值对的方式存贮数据,与xml格式相比,JSON是一种轻量级的数据交换格式:不要被JavaScri ...

  7. LGP5495 Dirichlet 前缀和

    题目 不是很明白为什么要叫做模板 考虑到\(a_i\)能对\(b_j\)产生贡献,当且仅当\(a_i=\prod p_k^{a_k},b_j=\prod p_k^{b_k},\forall k \ a ...

  8. SQL语句的四种连接

    SQL的四种连接查询 内连接 inner join 或者 join 外连接 左连接   left join 或者 left outer join 右连接  right join 或者 right ou ...

  9. 获取url指定参数值(js/vue)

    function getParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&am ...

  10. nodejs的安装和环境配置

    在安装npm的时候可能会报错, 可以按准过cnpm时淘宝在国内的npm镜像 命令如下:npm install -g cnpm --registry=https://registry.npm.taoba ...