省际联动distpicker插件的使用讲解
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插件的使用讲解的更多相关文章
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 省市区地址三级联动jQuery插件Distpicker使用
插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...
- jQuery Distpicker插件 省市区三级联动 动态赋值修改地址
在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...
- 移动端省际联动插件mobiscroll
<link href="assets/css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" typ ...
- 4个好用的JS联动选择插件
jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...
- v-distpicker 一个好用的三级联动的插件
// 引入插件npm install v-distpicker --save import VDistpicker from 'v-distpicker' Vue.component('v-distp ...
- vue 引用省市区三级联动(插件)
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...
- 关于jQuery插件imgAreaSelect基础讲解
关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:h ...
- jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...
随机推荐
- 大数据之hadoop小文件存档
hadoop小文件存档1.HDFS存档小文件弊端 每个文件均按块存储,每个块的元数据存储在NameNode的内存中,因此HDFS存储小文件会非常低效.因为大量的小文件会耗尽NameNode中的大部分内 ...
- 自签https证书2(适配新版chrome,不会显示“不安全”)
上一篇博文中介绍了自签https的方法,但是在新版的chrome中会出现这么一个问题:自签ca可以识别,但是证书仍然会判断不安全.为了解决这个问题,博主特地又查了好多资料,终于找到了解决方案. 当然, ...
- Android按钮绑定四种方式
public class MainActivity extends Activity implements OnClickListener{ @Override protected void onCr ...
- go string和[ ]byte
https://www.cnblogs.com/zhangboyu/p/7623712.html
- 洛谷P3239 [HNOI2015]亚瑟王
题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚瑟王是一个看脸的游戏,技能 ...
- Django问题2
接触django是从上个月开始,学习python时间也不长,但我经常在社区看看别人发表的文章,早上看到一篇不错的博客,却一直不能访 问,最终从bing的缓存里找到,因为害怕丢失和忘掉,所以顺便翻译过来 ...
- C++萃取技术的一个简单初探
首先本文并不是讲解C++萃取技术,关于C++的萃取技术网上有很多文章,推荐http://www.cppblog.com/woaidongmao/archive/2008/11/09/66387.htm ...
- MySQL系列(十二)--如何设计一个关系型数据库(基本思路)
设计一个关系型数据库,也就是设计RDBMS(Relational Database Management System),这个问题考验的是对RDBMS各个模块的划分, 以及对数据库结构的了解.只要讲述 ...
- Workman-Thrift疑问解析
Workman是纯纯的PHP实现的一套网络通信框架,Workman-Thrift则是以Workman为基础,为Thrift RPC实现网络通信.经过学习与测试,现把自己的疑问与验证记录下来: 问题一: ...
- js中的继承和重载
js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...