在选择框中停止对HTML选项的自动排序

Question

I have two HTML select boxes. I am moving options from one box to the other, box "from[]" and box "to[], respectively. The problem I have is that, the "to[]" box sorts my options alphabetically as they are added. I want each option to be appended to the box and have no sorting at all.

I have done a lot of reading on this and it seems like the "to[]" box should keep the order of the options as they are added but it does not.

I left my commented out code in my Javascript just you can see what I have tried. I'll remove it if it is making everything too messy.

Thanks!

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

You can do this in four steps:

1) You can map all selected options and return them as a delimited string (,)

2) Now split the string into an array .

3) Remove items that are moved from the From select element to the To one.

4) Finally loop through the array appending the options to the second select element.

---

Multi Select Example below

 //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>