省际联动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)拖拽裁剪图片,使其 ...
随机推荐
- js 中继承方式小谈
题外话 前段时间面试中笔试题有这道题目: 请实现一个继承链,要求如下: 构造函数A():构造函数中有consoleA方法,可以实现console.log("a") 实例对象 a:a ...
- Assert(断言) 的用法
Assert Assert是断言的意思,头文件为assert.h, assert是一个宏 功 能: 测试一个条件并可能使程序终止 用 法: void assert(int test); 在单元测试中经 ...
- 新建mapping
新建索引: PUT logstash-redis-log-2017.12 PUT logstash-redis-log-2017.12/_mapping/redis-log { &quo ...
- Jan&Feb 工作总结
一.工作任务: 熟悉dcbi项目(运维经分系统),完成指定需求. 熟悉bi项目(数据分析平台),完成指定需求. steel circus 主机游戏官网制作. 一拳超人游戏预注册页wap手机端制作. 二 ...
- spring加载属性配置文件内容
在spring中提供了一个专门加载文件的类PropertyPlaceholderConfigurer,通过这个类我们只需要给定需要加载文件的路径就可以 通过该类加载到项目,但是为了后面在程序中需要使用 ...
- Mysql优化系列之表设计规范和优化
一.范式 如果详细的讲范式,要写大大大篇文章来讲,这里假设大家知道一些基本的范式规则,我用简洁的语句和例子说明 第一范式:列不可再分,譬如地址字段,可以再细分为省市区门牌号等等(其实还是看需求怎么整) ...
- flexbox属性速览及常见布局实现
CSS3 弹性盒子(Flex Box)弹性盒子是即 CSS2 浮动布局后, CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同 ...
- Eclipse 连接MySql数据库总结
Eclipse 连接MySql数据库总结 一.在MySql中创建数据库,并创建表,向表中插入数据 1.创建数据库 create database select_test 2.创建表 create ta ...
- SHELL递归遍历文件夹下所有文件
#!/bin/bash read_dir(){ ` do "/"$file ] then if [[ $file != '.' && $file != '..' ] ...
- 2019-8-31-dotnet-core-发布只带必要的依赖文件
title author date CreateTime categories dotnet core 发布只带必要的依赖文件 lindexi 2019-08-31 16:55:58 +0800 20 ...