Listbox Move Up Down Right Left show / select all check list items in asp.net controls using javascript sample demo code:
Script:
<SCRIPT>
function listbox_move(listID, direction) {
var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;
if(-1 == selIndex) {
alert("Please select an option to move.");
return;
}
var increment = -1;
if(direction == 'up')
increment = -1;
else
increment = 1;
if((selIndex + increment) < 0 ||
(selIndex + increment) > (listbox.options.length-1)) {
return;
}
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text
listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;
listbox.selectedIndex = selIndex + increment;
}
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); // IE only
src.remove(count);
//dest.add(newOption, null); //Standard
//src.remove(count, null);
}catch(error) {
dest.add(newOption); // IE only
src.remove(count);
}
count--;
}
}
}
function listbox_selectall(listID, isSelect) {
var listbox = document.getElementById(listID);
for(var count=0; count < listbox.options.length; count++) {
listbox.options[count].selected = isSelect;
}
}
function listbox_showallall() {
var listbox = document.getElementById("d");
for(var count=0; count < listbox.options.length; count++) {
//listbox.options[count].selected = isSelect;
alert(listbox.options[count].text + "-" + listbox.options[count].value);
}
}
</SCRIPT>
function listbox_move(listID, direction) {
var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;
if(-1 == selIndex) {
alert("Please select an option to move.");
return;
}
var increment = -1;
if(direction == 'up')
increment = -1;
else
increment = 1;
if((selIndex + increment) < 0 ||
(selIndex + increment) > (listbox.options.length-1)) {
return;
}
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text
listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;
listbox.selectedIndex = selIndex + increment;
}
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); // IE only
src.remove(count);
//dest.add(newOption, null); //Standard
//src.remove(count, null);
}catch(error) {
dest.add(newOption); // IE only
src.remove(count);
}
count--;
}
}
}
function listbox_selectall(listID, isSelect) {
var listbox = document.getElementById(listID);
for(var count=0; count < listbox.options.length; count++) {
listbox.options[count].selected = isSelect;
}
}
function listbox_showallall() {
var listbox = document.getElementById("d");
for(var count=0; count < listbox.options.length; count++) {
//listbox.options[count].selected = isSelect;
alert(listbox.options[count].text + "-" + listbox.options[count].value);
}
}
</SCRIPT>
HTML Source:
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table> <tr valign="top"> <td> <br/><br/> Move <a href="#" onclick="listbox_move('d', 'up')">up</a>, <a href="#" onclick="listbox_move('d', 'down')">down</a> Select <a href="#" onclick="listbox_selectall('d', true)">all</a>, <a href="#" onclick="listbox_selectall('d', false)">none</a> </td> <td> </td> <td> <SELECT id="s" size="10" > <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 valign="center"> <a href="#" onclick="listbox_moveacross('s', 'd')">>></a> <br/> <a href="#" onclick="listbox_moveacross('d', 's')"><<</a> </td> <td> <SELECT id="d" size="10" runat="server"> <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> <br /> <a href=#" onclick="listbox_showallall();">Show All </a> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="listbox_showallall();" /> </ContentTemplate> </asp:UpdatePanel> </td> </tr> </table> </div>