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

這同時也讓我再次深深地感受到編碼規范和基礎的重要性，路漫漫其修遠兮，吾將上下而求索。