在選擇框中停止對HTML選項的自動排序

Question

我有兩個HTML選擇框。 我正在將選項分別從一個框移動到另一個框，分別是“ from []”框和“ to []框”。我的問題是，“ to []”框將添加的選項按字母順序排序。希望將每個選項附加到框中，並且完全沒有排序。

我對此進行了大量閱讀，似乎“ to []”框應在添加選項時保持選項的順序，但事實並非如此。

我將注釋掉的代碼留在Javascript中，以便您可以看到我嘗試過的內容。 如果將所有內容弄得太亂了，我將其刪除。

謝謝！

HTML：

<select name="from[]" id="fabricBox" class="form-control" size="8" multiple="multiple" style="width:100%">

<select name="to[]" id="fabricBox_to" class="form-control" size="8" multiple="multiple" required></select>

Javascript：

$('#fabricBox').dblclick (function(){
                $value = $('#fabricBox option:selected').val();
                $('#fabricBox_to').append($value); 

// $('#fabricBox_to').val() = $value 

// $text = $('#fabricBox option:selected').text();

// $("#fabricBox_to").append($('<option></option>').attr("value",$value).text($text)); 

Answer 1

我無法對其進行測試，但是類似這樣的方法應該起作用：

$("#fabricBox_to option:last").append('<option>' + $value + '</option>');

Answer 2

您可以通過四個步驟執行此操作：

1）您可以映射所有選定的選項，並將它們作為定界字符串 (,)

2）現在將字符串拆分為一個數組 。

3） 刪除被從移動從選擇元件到要將一個項目。

4）最后遍歷數組，將選項附加到第二個select元素。

---

下面的多重選擇示例

 //move items from fabricBox to fabricBox_to $("#move").on("click", function(){ MoveToandFrom("#fabricBox", "#fabricBox_to"); }); //You can even move the options back if you need to $("#moveBack").on("click", function(){ MoveToandFrom("#fabricBox_to", "#fabricBox"); }); //reusable function that moves selected indexes back and forth function MoveToandFrom(fromSelectElement, toSelectElement) { //get list of selected options as delimited string var selected = $(fromSelectElement + " option:selected").map(function(){ return this.value }).get().join(", "); //if no option is selected in either select box if( $.contains(selected, "") ){ alert("You have to select an option!"); return false; } //split the selected options into an array var stringArray = selected.split(','); //remove selected items from selected select box to second select box $(fromSelectElement + " option:selected").remove(); //loop through array and append the selected items to Fabric_to select box $.each( stringArray, function( key, value ) { $(toSelectElement).append("<option>" + value + "</option>"); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label for="fabricBox">From</label> <select name="from[]" id="fabricBox" class="form-control" size="8" multiple="multiple" style="width:100%"> <option>Fabric 1</option> <option>Fabric 2</option> <option>Fabric 3</option> <option>Fabric 4</option> <option>Fabric 5</option> <option>Fabric 6</option> </select> <button id="move">Move Selected</button> </div> <br/> <div> <label for="fabricBox_to">To</label> <select name="to[]" id="fabricBox_to" class="form-control" size="8" multiple="multiple" style="width:100%" required> </select> <button id="moveBack">Move Selected back</button> </div>