下拉框——把一个select框中选中内容移到另一个select框中遇到的问题

Posted 2020-06-22 DodoMonster

在使用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>

这同时也让我再次深深地感受到编码规范和基础的重要性，路漫漫其修远兮，吾将上下而求索。