JavaScript implements option data transfer for two ListBox

Html:





<div><span> selected time: </span><select id= "Xuanyongtimelb" style= "width:200px; height:130px "multiple=" multiple "></select></div>


<div class= "label" ><span id= "Righttimeid" >---></span><span id= "Lefttimeid" ><---< /span></div>


<div>


<span> available time: </span><select id= "Keyongtimelb" style= "width:200px; height:130px "multiple=" multiple ">


@* <option>0:00</option>*@


<option tag= "1" >0:30</option>


<option tag= "2" >1:00</option>


<option tag= "3" >1:30</option>


<option tag= "4" >2:00</option>


<option tag= "5" >2:30</option>


<option tag= "6" >3:00</option>


<option tag= "7" >3:30</option>


<option tag= "8" >4:00</option>


<option tag= "9" >4:30</option>


<option tag= "Ten" >5:00</option>


<option tag= "One" >5:30</option>


<option tag= ">6:00</option>"


<option tag= ">6:30</option>"


<option tag= ">7:00</option>"


<option tag= ">7:30</option>"


<option tag= ">8:00</option>"


<option tag= ">8:30</option>"


<option tag= ">9:00</option>"


<option tag= ">9:30</option>"


<option tag= ">10:00</option>"


<option tag= ">10:30</option>"


<option tag= ">11:00</option>"


<option tag= ">11:30</option>"


<option tag= ">12:00</option>"


<option tag= ">12:30</option>"


<option tag= ">13:00</option>"


<option tag= ">13:30</option>"


<option tag= ">14:00</option>"


<option tag= ">14:30</option>"


<option tag= ">15:00</option>"


<option tag= ">15:30</option>"


<option tag= ">16:00</option>"


<option tag= ">16:30</option>"


<option tag= ">17:00</option>"


<option tag= ">17:30</option>"


<option tag= ">18:00</option>"


<option tag= "Notoginseng" >18:30</option>


<option tag= ">19:00</option>"


<option tag= ">19:30</option>"


<option tag= ">20:00</option>"


<option tag= ">20:30</option>"


<option tag= ">21:00</option>"


<option tag= ">21:30</option>"


<option tag= ">22:00</option>"


<option tag= ">22:30</option>"


<option tag= ">23:00</option>"


<option tag= ">23:30</option>"


<option tag= ">24:00</option>"


</select>


</div>











I set the "tag" attribute in option, the purpose of which is to implement option to "sort" on both sides after the transfer between the two ListBox (this is important, I hope you will note that the order of option is very meaningful),





Maybe people will ask me, what do not assign values directly to option value?





The answer is: (as the case may be), because option text often does not represent the value we are going to get, and we sometimes have to resort to value or custom attribute values, and here I write the most general method, so that no matter when, it does not hinder My option Val defines what the value is (of course, use no value, listen to you, the programmer is the artist);





　　 below to explain the next JS section, I first post the code:





Sort Backup Time


Right


function Timelistboxright () {


var leftlb = document.getElementById ("Xuanyongtimelb");


var rightlb = document.getElementById ("Keyongtimelb");





var arrtext = new Array ();


var arrvalue = new Array ();


var arrtag = new Array ();


var arrindex = new Array ();





var j = 0;


for (var i = 0; i < leftlb.options.length; i++) {


if (leftlb.options[i].selected = = True) {


Leftlb.options.add (New Option (Rightlb.options[i].text, Rightlb.options[i].value));


Rightlb.options.remove (i);


ARRTEXT[J] = Leftlb.options[i].text;


ARRVALUE[J] = Leftlb.options[i].value;


ARRTAG[J] = Leftlb.options[i].getattribute ("tag");


ARRINDEX[J] = i;


j + +;


}


}





Add to


for (var k = 0; k < arrvalue.length; k++) {


var opt = new Option ();


Opt.value = Arrvalue[k];


Opt.text = Arrtext[k];


Opt.setattribute ("tag", Arrtag[k]);


Rightlb.options[rightlb.options.length] = opt;


}





Bubble sort


for (var m = 0; m < rightlb.options.length-1; m++) {


for (var l = 0; l < rightlb.options.length-1-M; l++) {


if (Number (Rightlb.options[l].getattribute ("tag")) > number (rightlb.options[l + 1].getattribute ("tag")) {





var temp = new Option ();


Temp.value = Rightlb.options[l].value;


Temp.text = Rightlb.options[l].text;


Temp.setattribute ("tag", Rightlb.options[l].getattribute ("tag"));





Rightlb.options[l].value = Rightlb.options[l + 1].value;


Rightlb.options[l].text = Rightlb.options[l + 1].text;


Rightlb.options[l].setattribute ("tag", Rightlb.options[l + 1].getattribute ("tag"));





Rightlb.options[l + 1].value = temp.value;


Rightlb.options[l + 1].text = temp.text;


Rightlb.options[l + 1].setattribute ("tag", Temp.getattribute ("tag"));





}


}


}





Delete


for (var n = arrindex.length-1 n >= 0; n--) {


Leftlb.options.remove (Arrindex[n]);


}





if (leftlb.options.length <= 0) {


$ ("#righttimeid"). Disable = true;


}





}





Item Left


function Timelistboxleft () {


var leftlb = document.getElementById ("Xuanyongtimelb");


var rightlb = document.getElementById ("Keyongtimelb");





var arrtext = new Array ();


var arrvalue = new Array ();


var arrtag = new Array ();


var arrindex = new Array ();





var j = 0;


for (var i = 0; i < rightlb.options.length; i++) {


if (rightlb.options[i].selected = = True) {


Leftlb.options.add (New Option (Rightlb.options[i].text, Rightlb.options[i].value));


Rightlb.options.remove (i);


ARRTEXT[J] = Rightlb.options[i].text;


ARRVALUE[J] = Rightlb.options[i].value;


ARRTAG[J] = Rightlb.options[i].getattribute ("tag");


ARRINDEX[J] = i;


j + +;


}


}





Add to


for (var k = 0; k < arrvalue.length; k++) {


var opt = new Option ();


Opt.value = Arrvalue[k];


Opt.text = Arrtext[k];


Opt.setattribute ("tag", Arrtag[k]);


Leftlb.options[leftlb.options.length] = opt;


}





Bubble sort


for (var m = 0; m < leftlb.options.length-1; m++) {


for (var l = 0; l < leftlb.options.length-1-M; l++) {


if (Number (Leftlb.options[l].getattribute ("tag")) > number (leftlb.options[l + 1].getattribute ("tag")) {





var temp = new Option ();


Temp.value = Leftlb.options[l].value;


Temp.text = Leftlb.options[l].text;


Temp.setattribute ("tag", Leftlb.options[l].getattribute ("tag"));





Leftlb.options[l].value = Leftlb.options[l + 1].value;


Leftlb.options[l].text = Leftlb.options[l + 1].text;


Leftlb.options[l].setattribute ("tag", Leftlb.options[l + 1].getattribute ("tag"));





Leftlb.options[l + 1].value = temp.value;


Leftlb.options[l + 1].text = temp.text;


Leftlb.options[l + 1].setattribute ("tag", Temp.getattribute ("tag"));





}


}


}





Delete


for (var n = arrindex.length-1 n >= 0; n--) {


Rightlb.options.remove (Arrindex[n]);


}





if (rightlb.options.length <= 0) {


$ ("#lefttimeid"). Disable = true;


}





}





The code above is also very detailed.





Be careful (may be of some use to you):





1. On the option of custom properties ("tag"), you need to understand that if you get "tag" through JS, or set the value of "tag",





Leftlb.options[i].getattribute ("tag"); Gets the value of the tag





Leftlb.options[l + 1].setattribute ("tag", Temp.getattribute ("tag")); Set the value of "tag"





The option in the 2.html Select is defined in javascript:





var opt = new Option ();


When assigning a value to "tag", remember, don't learn to do that text,value, (perhaps. You used to be very handy);





3. When we are in the transfer, we reorder, here, you want to use what method Platoon (the flexibility of the application of the algorithm). Of course, still must note: Tag's assignment;





The following method, I try hard, however, regardless of the use;


var temp = leftlb.options[l];


LEFTLB.OPTIONS[L] = leftlb.options[l+1];


LEFTLB.OPTIONS[L+1] = temp;











JavaScript controls the way the data is exchanged around the listbox in both list boxes





This example describes the way JavaScript controls the exchange of data around the listbox in two ListBox. Share to everyone for your reference. The specific analysis is as follows:





We often use this feature to move the elements of the left list box to the right, or to move the elements of the right list box to the left, and to move all at once





function Listbox_moveacross (SourceID, DestID) {


var src = document.getElementById (SourceID);


var dest = document.getElementById (DestID);


for (var count=0; count < src.options.length; count++) {


if (src.options[count].selected = = True) {


var option = Src.options[count];


var newoption = document.createelement ("option");


Newoption.value = Option.value;


Newoption.text = Option.text;


Newoption.selected = true;


try {


Dest.add (newoption, NULL); Standard


Src.remove (count, null);


}catch (Error) {


Dest.add (newoption); IE only


Src.remove (count);


}


count--;


}


}


}


//..


Listbox_moveacross (' countrylist ', ' selectedcountrylist ');





Here is a demo effect code like yes that can be done directly in the browser





Click below buttons to move selected options right or left.<br>


<table>


<tbody><tr>


<td>


<select id= "Sourceselect" size= "multiple=" ">


<option value= "a" >Afghanistan</option>


<option value= "B" >Bahamas</option>


<option value= "C" >Barbados</option>


<option value= "D" >Belgium</option>


<option value= "E" >Bhutan</option>


<option value= "F" >China</option>


<option value= "G" >Croatia</option>


<option value= "H" >Denmark</option>


<option value= "I" >France</option>


</select>


</td>


<td>


<button onclick= "Listboxmoveacross (' sourceselect ', ' destselect ');" >>></button> <br>


<button onclick= "Listboxmoveacross (' destselect ', ' sourceselect ');" ><<</button>


</td>


<td>


<select id= "Destselect" size= "multiple=" ">


<option value= "a" >Afghanistan</option>


<option value= "B" >Bahamas</option>


<option value= "C" >Barbados</option>


<option value= "D" >Belgium</option>


<option value= "E" >Bhutan</option>


<option value= "F" >China</option>


<option value= "G" >Croatia</option>


<option value= "H" >Denmark</option>


<option value= "I" >France</option>


</select>


</td>


</tr>


</tbody></table>


<script>


function Listboxmoveacross (SourceID, DestID) {


var src = document.getElementById (SourceID);


var dest = document.getElementById (DestID);


for (var count=0; count < src.options.length; count++) {


if (src.options[count].selected = = True) {


var option = Src.options[count];


var newoption = document.createelement ("option");


Newoption.value = Option.value;


Newoption.text = Option.text;


Newoption.selected = true;


try {


Dest.add (newoption, NULL); Standard


Src.remove (count, null);


}catch (Error) {


Dest.add (newoption); IE only


Src.remove (count);


}


count--;


}


}


}


</script>