JQuery select option用法
来源:互联网 发布:巨人网络回归a股涨多少 编辑:程序博客网 时间:2024/05/22 16:56
<div style="float:left;"> <select multiple id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="6">选项6</option> <option value="7">选项7</option> <option value="8">选项8</option> </select><br> <span id="add"> 选中添加到右侧 |</span><br> <span id="add_all"> 全选添加到右侧 |</span> </div> <div style="float:left;"> <select multiple id="select2" style="width:100px;height:160px;"> </select><br> <span id="remove"> 选中删除到左侧</span><br> <span id="remove_all"> 全选删除到左侧</span> </div> <input type="button" id="btn1"value="获取右侧下拉框内容">
页面:
给add add_all remove remove_all btn1 绑定事件:
$(function(){ $("#add").click(function(){ var xx=$("#select1 option:selected"); xx.appendTo($("#select2")); }); $("#add_all").click(function(){ var xx=$("#select1 option"); xx.appendTo($("#select2")); }); $("#remove").click(function(){ var xx=$("#select2 option:selected"); xx.appendTo($("#select1")); }); $("#remove_all").click(function(){ var xx=$("#select2 option"); xx.appendTo($("#select1")); }); $("#btn1").click(function(){ var box=$("#select2 option"); var len=box.length; var result=""; console.log(box); for(var i=0;i<len;i++){ result+=box[i].value+','; } console.log(result); });});
效果展示:
点击选中添加到右侧(ctrl可以一次选多个):
点击全选添加到右侧:
点击选中删除到左侧(ctrl可以一次选多个):
点击全选删除到左侧:
点击获取右侧下路况内容:
----------------------------------------------------------------------------------
现在有两个问题是:1,选项的顺序被打乱了,不知道怎么排序,等以后有机会再说吧。
2.option在项目里面肯定是动态获取的,我的的博客里面好像有介绍怎么获取的。
阅读全文
0 0
- JQuery select option用法
- jquery select option
- jquery select option 操作
- jQuery初始化select option
- JQuery Select 删除Option
- jquery select option
- jquery select option 操作
- jquery操作select option
- jquery select option
- jquery select option事件
- jquery操作select option
- jquery select option选中
- select option jquery
- jquery select option操作
- jquery添加select的option
- jquery select option 动态选中
- JQuery操作select中的option
- jquery select 动态添加option
- TCP 滑动窗口(发送窗口和接收窗口)
- oracle创建表空间及用户
- jQuery 图片懒加载原理
- KMP算法
- 3.2-全栈Java笔记:Java控制语句(中)循环结构篇
- JQuery select option用法
- hash实例讲解
- Linux#Shell#密码生成脚本
- 队列的c代码实现
- 指针_三种方式访问成员、动态内存分配【就当做笔记了】*
- 逻辑复杂的业务代码如何实现有顺序的跳转展示(登录成功后要去摇奖,设置预留信息,修改密码,弹窗警告......等等)
- Create Shortcut for windows 10 Universal Apps
- JAVA学习日记----------容器的扩展
- HBase笔记-1.基本介绍