By 05/02/2014 13 Comments

How to move options to the left or right using Listbox in Javascript

Move options from right to left and vice versa using listbox

  • This is used for move or add options from one listbox to another

Following is a example of Move options from right to left and vice versa using listbox in javascript

<script>

function listbox_moveacross(sourceID, destID) { // function pass 2 parameters, first is source (orignal listbox), second is destination id (move to listbox)

var src = document.getElementById(sourceID); // get html element by using id

var dest = document.getElementById(destID);

for(var count=0; count < src.options.length; count++) { // loop through listbox's values

if(src.options[count].selected == true) { // make sure the listbox value is selected by the user

var option = src.options[count]; // get the values of actual list box (source) and assign into option variable

var newOption = document.createElement("option"); // a new html option element is being created from source value

newOption.value = option.value; // set value

newOption.text = option.text; // set option text

newOption.selected = true; // selected

try {
dest.add(newOption, null); //Standard, add new moved value from source to destination listbox

src.remove(count, null);

}catch(error) { // handle exception

dest.add(newOption); // IE only

src.remove(count);
}
count--;
}
}
}

</script>

<select multiple="multiple" id = "countryList">   <!-- rendered listBox control --->
<option value = "java">Java</option>
<option value = "php">Php</option>
<option value = "asp">Asp.net</option>
<option value = "boot">Bootstraps</option>
<option value = "r">Ruby</option>
<option value = "p">Python</option>
</select>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select multiple="multiple" id = "selectedCountryList">
<option value = "s">Sql</option>
<option value = "o">Oracle</option>
<option value = "w">Wpf</option>
</select> <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!--- above function called by following buttons ---->
<button onclick="listbox_moveacross('countryList', 'selectedCountryList')"> > </button>

<button onclick="listbox_moveacross('selectedCountryList','countryList')"> < </button>






Posted in: JavaScript

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .