下拉框——把一个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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows API 串口编程参考

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** &#xff08;一&#xff09;Windows API串口通信编程概述 Windows环境下的串口编程与D…

jquery post php返回html,jquery ajax post 提交数据,返回的是当前网页的html?

代码如下用户名:密 码:$("#login_submit").bind("click",function(){var type "post";var url "index.php?madmin&cindex&acheckLogin";var formArrays $("#admin_form").serializeArray();var requestData …

[转]Android Studio系列教程六--Gradle多渠道打包

转自&#xff1a;http://www.stormzhang.com/devtools/2015/01/15/android-studio-tutorial6/ Android Studio系列教程六--Gradle多渠道打包 2015 年 01 月 15 日 devtools本文为个人原创&#xff0c;欢迎转载&#xff0c;但请务必在明显位置注明出处&#xff01; 由于国内Andr…

服务器上装filezilla server后,本地的ftp客户端连接不上去

公司一台服务器&#xff0c;上面装了filezilla server后&#xff0c;按平常配置好了&#xff0c;但是在本地用FTP客户端不管怎么连接都连接不上&#xff0c;本地FTP客户端总提示连接失败&#xff0c;远程filezilla server的界面也没有提示有人连接&#xff0c; 仔细看了一下&am…

数据结构与算法之堆与堆排序

在数据结构中&#xff0c;堆其实就是一棵完全二叉树。我们知道内存中也有一块叫做堆的存储区域&#xff0c;但是这与数据结构中的堆是完全不同的概念。在数据结构中&#xff0c;堆分为大根堆和小根堆&#xff0c;大根堆就是根结点的关键字大于等于任一个子节点的关键字&#xf…

非法操作 login.php,阅文游戏中心 h5游戏接入wiki

阅文游戏中心《h5游戏 CP接口规范》接口要求规范游戏方接口说明&#xff1a;游戏方需按照规范提供&#xff0c;阅文进行调用阅文接口说明&#xff1a;阅文提供&#xff0c;游戏方调用参数 time 为Unix 时间戳(January 1 1970 00:00:00 GMT 起的秒数) &#xff0c;单位为秒编码统…

串口通信与编程:串口基础知识

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 串口是串行接口&#xff08;serial port&#xff09;的简称&#xff0c;也称为串行通信…

jmeter上传文件搞了一天,才搞定,没高人帮忙效率就是低,赶紧记下来,以备后用...

jmeter上传文件搞了一天&#xff0c;才搞定&#xff0c;没高人帮忙效率就是低&#xff0c;赶紧记下来&#xff0c;以备后用 先用谷歌浏览器抓包&#xff0c;抓到的包类似这样&#xff1a; 在jmeter里添加一个http请求&#xff0c;配置好参数&#xff0c;方法&#xff0c;端口&a…

自定义dialog

2019独角兽企业重金招聘Python工程师标准>>> R.layout.layout_insert_dialog自定义布局 View mViewLayoutInflater.from(MainActivity.this).inflate(R.layout.layout_insert_dialog, null); AlertDialog.Builder dialognew AlertDialog.Builder (MainActivity.this…

js unescape 对应php的函数,php实现Javascript的escape和unescape函数

由于需要用到php调用js文件&#xff0c;在网上找了相关的资料&#xff0c;并改写了相关的方法。php实现 Javascript的escape函数方法&#xff1a;function escape($str) {preg_match_all("/[/xc2-/xdf][/x80-/xbf]|[/xe0-/xef][/x80-/xbf]{2}|[/xf0-/xff][/x80-/xbf]{3}|[…

字符数组,字符串、数字转化

<p style"margin-top: 5px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; line-height: 26px; word-wrap: break-word; color: rgb(102, 102, 102); font-family: 宋体, Arial; font-size: 16px;">//****************************************…

PE文件RV转FOA及FOA转RVA

/************************************************************************/ /* 功能:虚拟内存相对地址和文件偏移的转换 参数&#xff1a;stRVA&#xff1a; 虚拟内存相对偏移地址 lpFileBuf: 文件起始地址 返回&#xff1a;转换后的文件偏移地址 */ /*****************…

SurfaceView类透明背景设置

将SurfaceView背景设置为透明&#xff0c;主要添加以下几句话就可以了&#xff1a; 在SurfaceView创建后设置一下下面的参数&#xff1a; setZOrderOnTop(true); getHolder().setFormat(PixelFormat.TRANSLUCENT); 还有在draw方法中绘制背景颜色的时候以下面的方式进行绘制就可…

oracle的env函数用法,env命令_Linux env 命令用法详解:显示系统中已存在的环境变量...

env命令用于显示系统中已存在的环境变量&#xff0c;以及在定义的环境中执行指令。该命令只使用"-"作为参数选项时&#xff0c;隐藏了选项"-i"的功能。若没有设置任何选项和参数时&#xff0c;则直接显示当前的环境变量。如果使用env命令在新环境中执行指令…

网络通信的工作原理

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 1、什么是计算机网络&#xff1f; 计算机网络是由两台或两台以上的计算机通过网络设备…

Bossie Awards 2015: The best open source applicati

2019独角兽企业重金招聘Python工程师标准>>> Read about more open source winners InfoWorlds Best of Open Source Awards for 2014 celebrate more than 100 open source projects, from the bottom of the stack to the top. Follow these links to more open s…

oracle中pga指什么,oracle学习SGA跟PGA理解

SGA&#xff1a;SystemGlobal Area是OracleInstance的基本组成部分&#xff0c;在实例启动时分配;系统全局域SGA主要由三部分构成&#xff1a;数据库缓冲区、日志缓冲区、共享池&#xff0c;还可能包含&#xff1a;大池&#xff0c;JAVA池&#xff0c;流池。注意点&#xff1a;…

oracle重做日志教程,Oracle教程:重做日志文件基本维护

重做日志文件最重要的用途就是用来恢复数据(其实你也可以用来logminer)&#xff0c;它记录着system global area(sga)当中的database bu重做日志文件最重要的用途就是用来恢复数据(其实你也可以用来logminer)&#xff0c;它记录着system global area(sga)当中的database buffer…

以太网,局域网,万维网

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 以太网是一种通信协议标准 万维网WWW 是 Internet 的多媒体信息查询工具 以太网: 以…

java的自动类型转换和强制类型转换

在程序运行时&#xff0c;经常需要将一种数值类型进行转换成另一种类型。下面给出了一个合法的转换。数值之间的合法转换上图中有6个实心箭头&#xff0c;表示无信息丢失的转换&#xff0c;有三个虚箭头&#xff0c;表示可能有精度丢失的转换。例如123456789是一个大整数&#…