jquery城市选择案例
1.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-jQuery-城市选择案例</title>
<style type="text/css" media="screen">
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
<script src="jquery-1.11.3.js"></script>
<script>
// $(function(){
// $("#btn-sel-none").on('click',function(){
// $("#tar-city option").appendTo('#src-city');
// }); // $("#btn-sel-all").on('click',function(){
// $("#src-city option").appendTo('#tar-city');
// });
// $("#btn-sel").on('click',function(){
// $("#src-city option:selected").appendTo('#tar-city');
// });
// $("#btn-back").on('click',function(){
// $("#tar-city option:selected").appendTo('#src-city');
// });
// }); $(function(){
$("#btn-sel-all").on('click',function(){
//把所有的 城市从左边 移动到右边select中
$("#src-city option").appendTo("#tar-city");
});
$("#btn-sel-none").on('click',function(){
//把所有的 城市从左边 移动到右边select中
$("#tar-city option").appendTo("#src-city");
});
$("#btn-sel").on('click',function(){
//把所有的 城市从左边 移动到右边select中
$("#src-city option:selected").appendTo("#tar-city");
}); $("#btn-back").on('click',function(){
//把所有的 城市从左边 移动到右边select中
$("#tar-city option:selected").appendTo("#src-city");
});
});
</script>
</head>
<body>
<select id="src-city" name="src-city" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">西红柿</option>
</select>
<div class="btn-box">
<button id="btn-sel-all"> >> </button>
<button id="btn-sel-none"> << </button>
<button id="btn-back"> < </button>
<button id="btn-sel"> ></button>
</div> <select id="tar-city" name="tar-city" multiple> </select>
</body>
</html>
2.实例截图
jquery城市选择案例的更多相关文章
- JQuery城市选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery省市选择案例
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 基于jQuery仿去哪儿城市选择代码
基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="lin ...
- jQuery---城市选择案例
城市选择案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- 基于jquery的城市选择插件
城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...
- jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
jquery插件课程1 幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)
JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...
- 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)
周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...
随机推荐
- [实战]MVC5+EF6+MySql企业网盘实战(14)——思考
写在前面 从上面更新编辑文件夹,就一直在思考一个问题,之前编辑文件夹名称,只是逻辑上的修改,但是保存的物理文件或者文件夹名称并没有进行修改,这样就导致一个问题,就是在文件或者文件夹修改名称后就会找不到 ...
- Three.js基础探寻七——Lamber材质与Phong材质
材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...
- 【LOJ】 #2013. 「SCOI2016」幸运数字
题解 最大异或和,明显是个线性基 然而还有那么多路径--那就树分治,反正点数看起来很少,就是为了让人乘上一个60的常数嘛 把一个树的点分树记录下来,然后看看询问的两个点彼此相同的最后一个父亲是谁,把这 ...
- SSH整合最简单的一个例子
1.新建mysql数据库 create database spring; 切换数据库 use spring; 新建表 create table user (id int(3) auto_incre ...
- Linux的经典shell命令整理
Linux的经典shell命令整理 1.删除0字节文件find -type f -size 0 -exec rm -rf {} \; 2.查看进程按内存从大到小排列ps -e -o “%C : %p ...
- Redis学习篇(二)之Hash类型及其操作
HSET 作用: 将哈希表key中的域field设置成指定的value 语法:HSET key field value HSET userinfo name 'zhangsan' HSET useri ...
- 【BZOJ 4361】 4361: isn (DP+树状数组+容斥)
4361: isn Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 218 Solved: 126 Description 给出一个长度为n的序列A( ...
- 【BZOJ 1062】 1062: [NOI2008]糖果雨 (二维树状数组)**
1062: [NOI2008]糖果雨 Description 有一个美丽的童话:在天空的尽头有一个" 糖果国" ,这里大到摩天大厦,小到小花小草都是用糖果建造而成的.更加神奇的是, ...
- HTML && xml 的区别
HTML && xml 的区别 HTML 超文本标记语言 xml 可扩展标记语言 jsp 表面是一个HTML页面,本质是一个servlet HTML 超文本标记语言 HTML 是一 ...
- JBoss 7 配置成windows启动服务
将Jboss7 server 配置成一个windows启动服务的两个文件,部署步骤如下: 1. 先检查是否配置java_home和jboss_home的环境变量,如没配置上先配置,如我的是JBO ...