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. day 64 Django基础十之Form和ModelForm组件

    Django基础十之Form和ModelForm组件   本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Mod ...

  2. 开发笔记-19/10/28 -SpringBoot @Value 获取配置参数

    1. 在application.properties 定义参数 role.taskEvent :参数名称 4:值 ## ---------------------任务角色--------------- ...

  3. Print Article /// 斜率优化DP oj26302

    题目大意: 经典题 数学分析 G(a,b)<sum[i]时 a优于b G(a,b)<G(b,c)<sum[i]时 b必不为最优 #include <bits/stdc++.h& ...

  4. Activiti业务键(businessKey)

    问题:如何让业务对象和对应的流程 关联? 发现ProcessInstance 有个方法getBusinessKey()可以得到一个businessKey. ProcessInstance 对应数据库中 ...

  5. Java SE开发系列-JDK下载安装

    JDK下载安装 JDK是Java的开发环境,目前JDK内部也包含了JRE,JRE主要是JAVA程序的运行环境. 点击官方下载地址,按着下图操作即可下载对应系统的不同版本JDK. 进入页面滑到页面底部点 ...

  6. uoj349 即时战略

    题意:这是一道交互题.交互库中有一棵树.一开始只有1节点已知.需要在T次询问内使得n个节点都已知.一次询问explore(x,y),返回从x到y路径上第一个点,并将返回点标记为已知. 数据有区分. 标 ...

  7. Ignite-Spark

    2017.12.02 Ignite-Spark 讲ppt的时候还是很紧张 PPT地址 https://files.cnblogs.com/files/swobble/Spark.pptx

  8. 关于将ECharts引入到项目中的几种方式

    方式一.在webpack中使用ECharts 1.npm安装ECharts npm install echarts --save 2.引入ECharts 通过 npm 上安装的 ECharts 和 z ...

  9. 安装Tengine和Tengine说明

    什么是Tengine 官方帮助文档:http://tengine.taobao.org/nginx_docs/cn/   Tengine的安装   新建tengine用户组 groupadd -r n ...

  10. VS2010-MFC(对话框:非模态对话框的创建及显示)

    转自:http://www.jizhuomi.com/software/162.html 前面已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本节会将上一讲中 ...