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. Linux和Windows下ping命令详解

    转:http://linux.chinaitlab.com/command/829332.html 一.Linux下的ping参数 用途 发送一个回送信号请求给网络主机. 语法 ping [ -d] ...

  2. node.js在ubuntu上和windows上的安装

    Ubuntu 上安装 Node.js Node.js 源码安装 以下部分我们将介绍在Ubuntu Linux下安装 Node.js . 其他的Linux系统,如Centos等类似如下安装步骤. 在 G ...

  3. Docker系列(三):Docker自定义容器镜像

    将容器编程镜像: docker commit [repo:tag] 网上有这句话:当我们在制作自己的镜像的时候,会在container中安装一些工具.修改配置,如果不做commit保存 起来,那么co ...

  4. LightOJ-1259-Goldbach`s Conjecture-素数打表+判断素数对数

    Goldbach's conjecture is one of the oldest unsolved problems in number theory and in all of mathemat ...

  5. Bzoj 1036 树的统计 分类: ACM TYPE 2014-12-29 18:55 72人阅读 评论(0) 收藏

    Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...

  6. 最近开始学习python,学习到了关于web的内容。

    然而在win10中IIS发布CGI脚本的时候遇到了各种各样的问题. 如ISAPI和CGI限制,权限限制等等,一一的百度解决了,最后又出现了 HTTP 错误 502.2 - Bad Gateway Th ...

  7. USACO 2009 Open Treasure Cave /// DFS||并查集 oj26215

    题目大意: 输入 p,n,t :p为地点数 判断 t 能否回到源点1 接下来n行 每行输入 a b c: a能到达b和c Sample Input 13 6 76 7 82 3 410 11 128 ...

  8. C# 封装首页、上一页、下一月、尾页处理器

    public void BtnPageClickEvent(object sender,string focusForeground,string lostFocusForeground) { But ...

  9. C开发系列-数组

    C语言数组 数组:用来存储一组数据. 计算C语言的数组长度 int age1 = 12; int age2 = 15; int age3 = 10; int age4 = 13; int ages[] ...

  10. (转) Vultr能Ping但是SSH无法连接

    原文链接:https://www.bestqliang.com/2018/06/27/Vultr%E8%83%BDPing%E4%BD%86%E6%98%AFSSH%E6%97%A0%E6%B3%95 ...