城市选择案例
时间:2019-09-15
本文章向大家介绍城市选择案例,主要包括城市选择案例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
布局:
h1
select#src-city > option*5
btn-box > button*4
select#target-city
案例分析:
1,点击第一个按钮,左边所有的城市全部移动右边
2,点击第二个按钮,右边所有的城市全部移到左边
3,点击第三个按钮,左边选中的城市全部移到右边
4,点击第四个按钮,右边选中的城市全部移到左边
jQuery代码:
$("#btn1").click(function(){ $("#src-city > option").appendTo("#tar-city"); }) $(”#btn2“).click(function(){ $("#src-city").appen($("#tar-city > option")); }) $("#btn3").click(function(){ $("#src-city > option : selected").appendTo("#tar-city"); }) $("#btn4").click(function(){ $("#src-city").append($("#tar-city > option :selected")); })
完整代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> select { width: 200px; background-color: teal; height: 200px; font-size: 20px; } .btn-box { width: 30px; display: inline-block; vertical-align: top; } </style> </head> <body> <h1>城市选择:</h1> <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="btn1"> >> </button> <button id="btn2"> << </button> <button id="btn3"> ></button> <button id="btn4"> < </button> </div> <select id="tar-city" name="tar-city" multiple> </select> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#btn1").click(function () { $("#src-city>option").appendTo("#tar-city"); }); $("#btn2").click(function () { $("#src-city").append($("#tar-city>option")); }); $("#btn3").click(function () { $("#src-city>option:selected").appendTo("#tar-city"); }); $("#btn4").click(function () { $("#src-city").append($("#tar-city>option:selected")); }); }); </script> </body> </html>
原文地址:https://www.cnblogs.com/shanlu0000/p/11523761.html
- 用Python将word文件转换成html
- 1行Python代码实现FTP服务器
- 100行Python代码实现自动抢火车票
- Python交互式数据分析报告框架:Dash
- PyQt5 GUI应用程序工具包入门(2)
- 用Python研究了三千套房子,告诉你究竟是什么抬高了房价?
- 设计模式之装饰模式
- Android网络编程(六)OkHttp3用法全解析
- Android网络编程(五)OkHttp用法全解析
- Android网络编程(一)HTTP协议原理
- Spring Cloud实战小贴士:Zuul统一异常处理(二)
- Android View体系(九)自定义View
- Android网络编程(二)HttpClient与HttpURLConnection
- Spring Batch入门篇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux KeyLogger
- [- Flutter 数据&状态篇 -] InheritedWidget
- Android实现图片一边的三角形边框效果
- Android使用SoundPool播放短音效
- 用Jquery做一个进度条
- Android SoundPool实现简短小音效
- [-Flutter趣玩篇-] 出神入化的Align
- Android应用禁止屏幕休眠的3种方法
- Flutter 实现下拉刷新上拉加载的示例代码
- [- C++趣玩篇1 -] 从打印开始说起
- Android实现蓝牙(BlueTooth)设备检测连接
- JQuery 入门学习(三)
- Android实现美团APP的底部滑动菜单
- 正则十八式-第二式:控鹤擒龙
- android实现手写签名功能