在选择框中停止对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>