下拉框——把一个select框中选中内容移到另一个select框中遇到的问题
在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来的select框中,代码如下:
<select class="select1" name="select1" multiple="multiple">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="上海">上海</option>
<option value="桂林">桂林</option>
<option value="广州">广州</option>
<option value="肇庆">肇庆</option>
<option value="佛山">佛山</option>
</select>
<select class="select2" name="select2" multiple="multiple"></select>
<div class="selectBtn">
<button class="add">选中添加到右边</button>
<button class="addAll">全选添加到右边</button>
</div>
<div class="selectBtn">
<button class="remove">选中删除到左边</button>
<button class="removeAll">全选删除到左边</button>
</div>
jQuery代码:
$(".add").click(function() { //左→右
var $option = $(".select1 option:selected");
$add.appendTo(".select2");
});
$('.addAll').click(function() { //全选左→右
var $option = $(".select1 option");
$option.appendTo(".select2");
});
$(".remove").click(function() {//右→左
var $option = $(".select2 option:selected");
$option.appendTo(".select1");
});
$(".removeAll").click(function() { //全选右→左
var $option = $(".select2 option");
$option.appendTo(".select1");
});
开始一直以为是select框和js的代码问题,所以思索了很久,也研究了很久select框和js的代码还是没发现问题所在。后来再看回html代码想想有没有可能是因为使用button的问题,后来把button改为了span才解决了问题。至此又重新去学习了解button标签。
原来是因为button除了在IE浏览器的默认类型type是“button”而在其他浏览器中(包括w3c规范)的默认类型type都是“submit”。所以我们应该始终为按钮button规定type属性。
修正后的html代码:
<select class="select1" name="select1" multiple="multiple">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="上海">上海</option>
<option value="桂林">桂林</option>
<option value="广州">广州</option>
<option value="肇庆">肇庆</option>
<option value="佛山">佛山</option>
</select>
<select class="select2" name="select2" multiple="multiple"></select>
<div class="selectBtn">
<span class="add">选中添加到右边</span>
<span class="addAll">全选添加到右边</span>
</div>
<div class="selectBtn">
<button type="button" class="remove">选中删除到左边</button>
<button type="button" class="removeAll">全选删除到左边</button>
</div>
这同时也让我再次深深地感受到编码规范和基础的重要性,路漫漫其修远兮,吾将上下而求索。
转载于:https://www.cnblogs.com/dodomonster/p/5272758.html
下拉框——把一个select框中选中内容移到另一个select框中遇到的问题相关推荐
- list申请java,java把一个list中的内容添加到另一个list中 FPGA编程问题:有多个.v文件与module,把他们加到......
导航:网站首页 > java把一个list中的内容添加到另一个list中 FPGA编程问题:有多个.v文件与module,把他们加到... java把一个list中的内容添加到另一个list中 ...
- 背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容...
原文:背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容 [源码下载 ...
- excel表格内容拆分_Excel表格中制作动态下拉菜单的方法,学会了菜单内容想加就加...
To do list heading 在我们日常工作中,利用下拉菜单选择输入,不仅对单元格输入内容进行限制,关键是省去打字的麻烦,点点鼠标就完成输入了.通常情况下,我们是通过通过数据验证(数据有效性) ...
- excel如何设置下拉选项,只允许选择固定的内容
excel设置下拉选项 excel取消下拉选项
- Java基础,读取文件中的内容写入到另外一个文件。
有两种方法,首先: 第一种方法:一次性全部读取所有文件内容(这里Arrays.sort(b)代表对字节进行排序,如果不需要进行删除即可) import java.io.FileInputStream; ...
- php获取括号中的内容,PHP实现正则匹配所有括号中的内容
PHP实现正则匹配所有括号中的内容 正则表达式:(?<=[)[^]]+ 注:以匹配中文括号中内容为例,如果匹配非中文括号,则需要在括号前增加转义符 PHP实现示例: $strSubject = ...
- 怎样把一个PSD文件里的图层移到另一个PSD文件里
你可以先打开两个PSD文件,然后进入你想要复制图层的那个PSD文件,选中你想要的图层,右击,复制(注意,是右击图层的空白部分,不是它的图标),然后会弹出一个对话框,你下拉菜单,然后你选择另一个PSD文 ...
- 在LINUX中如何把2个文件中的内容合到另一个文件中
可以使用cat命令,有两种实现的方式,一种将两个文件合并的到一个新的文件,另一种将一个文件追加到另一个文件的末尾. 方法一:使用cat命令从文件中读入两个文件,然后将重定向到一个新的文件.这种方法可以 ...
- ls命令具有一个-r选项,可以递归的列出子目录中的内容。请编写一个具有同样功能的程序。...
1 #include <unistd.h> 2 #include <stdio.h> 3 #include <stdlib.h> 4 #include <di ...
最新文章
- 1.一步一步移植ucos到stm32f103开发版(修订版)
- bestcoder #71 1003 找位运算的最大生成树
- 随着浏览器滚动,页面组件跟着滚动的效果
- VMware Storage Array 访问模式
- 世界第一薄MacBook Air笔记本切菜演示(组图)
- Error while compiling statement: FAILED: LockException [Error 10280]
- jmeter java接口,jmeter并发测试java接口 | 学步园
- python程序怎么修改_详解Python文件修改的两种方式
- Vue学习笔记(5)(Vuex)
- BZOJ3638|CodeForces 280D k-Maximum Subsequence Sum
- java怎样实现重载一个方法
- 牛客寒假算法集训 1
- ajax跨域访问问题
- 常见问题4:文本不能选择 效果
- ScrollRect裁剪ParticleSystem粒子
- 计算机二级excel经典操作题,计算机二级office经典题库
- 基于JavaEE的居民水电费管理系统_JSP网站设计_MySQL数据库设计
- Python黑客绝技04:Python基础知识2
- 我曾经爱过你---I Loved You
- 2022年「博客之星」参赛博主:(天寒雨落)在等您评价 ~{附实时总榜单排名}
热门文章
- opencv计算图像亮度调节_OpenCV教程创建Trackbar图像对比度、亮度值调整
- redis排行榜之日排行周排行设计
- PaperNotes(16)-图神经网络GNN简史、不动点建模-笔记
- 矩阵论-线性空间的基与坐标,基变换坐标变换
- 《Python Cookbook 3rd》笔记(3.1):数字的四舍五入
- python sqlserver 数据操作_python对Excel数据进行读写操作
- STL源码剖析 序列式容器 deque双端队列
- Ubuntu修改界面的大小
- 中科大 计算机网络4 网络核心Core 分组交换 电路交换
- 过度扩容 A股“虚胖”