// Option 1: jQuery
<script type="text/javascript" language="javascript">
$(document).keydown(function (e) {
var element = e.target.nodeName.toLowerCase();
if (element != 'input' && element != 'textarea') {
if (e.keyCode === 8) {
return false;
}
}
});
$(document).ready(function () {
$("#<%=hdnAssignedModules.ClientID%>").val('');
var sAllValue = '';
$('#<%=lstAssigenedModules.ClientID %> option').each(function () {
var vImgValue = $(this).val();
sAllValue = sAllValue + vImgValue + ";";
});
$("#<%=hdnAssignedModules.ClientID%>").val(sAllValue);
$('#<%=lstAllModules.ClientID %>').click(function () {
if ($('#<%=lstAllModules.ClientID %> > option:selected').val() != '')
$('#btnAddModule').removeAttr('disabled');
else
$('#btnAddModule').attr('disabled', 'disabled');
});
$('#<%=lstAssigenedModules.ClientID %>').click(function () {
if ($('#<%=lstAssigenedModules.ClientID %> > option:selected').val() != '')
$('#btnRemModule').removeAttr('disabled');
else
$('#btnRemModule').attr('disabled', 'disabled');
});
$('#btnAddModule').click(
function (e) {
if ($('#<%=lstAllModules.ClientID %> > option:selected').appendTo($('#<%=lstAssigenedModules.ClientID %>')));
$('#btnAddModule').attr('disabled', 'disabled');
var sAllValue = '';
$("#<%=hdnAssignedModules.ClientID%>").val('');
$('#<%=lstAssigenedModules.ClientID %> > option').each(function () {
var vImgValue = $(this).val();
sAllValue = sAllValue + vImgValue + ";";
});
$("#<%=hdnAssignedModules.ClientID%>").val(sAllValue);
});
$('#btnRemModule').click(function (e) {
if ($('#<%=lstAssigenedModules.ClientID %> > option:selected').appendTo($('#<%=lstAllModules.ClientID %>')));
$('#btnRemModule').attr('disabled', 'disabled');
$("#<%=hdnAssignedModules.ClientID%>").val('');
var sAllValue = '';
$('#<%=lstAssigenedModules.ClientID %> > option').each(function () {
var vImgValue = $(this).val();
sAllValue = sAllValue + vImgValue + ";";
});
$("#<%=hdnAssignedModules.ClientID%>").val(sAllValue);
});
});
</script>
// Option 2: Javascript
<script type="text/javascript" language="javascript">
function move(tbFrom, tbTo) {
var arrFrom = new Array(); var arrTo = new Array();
var arrLU = new Array();
var i;
for (i = 0; i < tbTo.options.length; i++) {
arrLU[tbTo.options[i].text] = tbTo.options[i].value;
arrTo[i] = tbTo.options[i].text;
}
var fLength = 0;
var tLength = arrTo.length;
for (i = 0; i < tbFrom.options.length; i++) {
arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
if (tbFrom.options[i].selected && tbFrom.options[i].value != "") {
arrTo[tLength] = tbFrom.options[i].text;
tLength++;
}
else {
arrFrom[fLength] = tbFrom.options[i].text;
fLength++;
}
}
tbFrom.length = 0;
tbTo.length = 0;
var ii;
for (ii = 0; ii < arrFrom.length; ii++) {
var no = new Option();
no.value = arrLU[arrFrom[ii]];
no.text = arrFrom[ii];
tbFrom[ii] = no;
}
for (ii = 0; ii < arrTo.length; ii++) {
var no = new Option();
no.value = arrLU[arrTo[ii]];
no.text = arrTo[ii];
tbTo[ii] = no;
}
document.getElementById("SiteBody_hdnAssignedModules").value = "";
var sAllValue = '';
var list = document.getElementById('SiteBody_lstAssigenedModules');
for (i = 0; i < list.options.length; i++) {
sAllValue = sAllValue + list.options[i].value + ";";
}
document.getElementById("SiteBody_hdnAssignedModules").value = sAllValue;
document.getElementById("btnAddModule").disabled = true;
document.getElementById("btnRemModule").disabled = true;
}
function enableAddButton() {
var list = document.getElementById('SiteBody_lstAllModules');
if (list.options.length != 0) {
var indx = list.selectedIndex;
if (list[indx].value != '')
document.getElementById("btnAddModule").disabled = false;
else
document.getElementById("btnAddModule").disabled = true;
}
}
function enableRemoveButton() {
var list = document.getElementById('SiteBody_lstAssigenedModules');
if (list.options.length != 0) {
var indx = list.selectedIndex;
if (list[indx].value != '')
document.getElementById("btnRemModule").disabled = false;
else
document.getElementById("btnRemModule").disabled = true;
}
}
function SetAssignedModules() {
document.getElementById("SiteBody_hdnAssignedModules").value = "";
var sAllValue = '';
var list = document.getElementById('SiteBody_lstAssigenedModules');
for (i = 0; i < list.options.length; i++) {
sAllValue = sAllValue + list.options[i].value + ";";
}
document.getElementById("SiteBody_hdnAssignedModules").value = sAllValue;
}
</script>
PAGE:
<tr>
<td>
<asp:ListBox ID="lstAllModules" onClick="enableAddButton()" runat="server"></asp:ListBox>
</td>
<td>
<input type="button" id="btnAddModule" value="Add >>" style="width: 90px;"
disabled="disabled" onclick="move(this.form.SiteBody_lstAllModules,this.form.SiteBody_lstAssigenedModules)" />
<input type="button" id="btnRemModule" value="<< Remove" style="width: 90px;"
disabled="disabled" onclick="move(this.form.SiteBody_lstAssigenedModules,this.form.SiteBody_lstAllModules)" />
</td>
<td>
<asp:ListBox ID="lstAssigenedModules" onClick="enableRemoveButton()" runat="server">
</asp:ListBox>
<asp:HiddenField ID="hdnAssignedModules" runat="server" />
</td>
</tr>
NOTE:
* SetAssignedModules()-> Setting dropdown values to hidden feilds.
* Change Controls' Id.
<script type="text/javascript" language="javascript">
$(document).keydown(function (e) {
var element = e.target.nodeName.toLowerCase();
if (element != 'input' && element != 'textarea') {
if (e.keyCode === 8) {
return false;
}
}
});
$(document).ready(function () {
$("#<%=hdnAssignedModules.ClientID%>").val('');
var sAllValue = '';
$('#<%=lstAssigenedModules.ClientID %> option').each(function () {
var vImgValue = $(this).val();
sAllValue = sAllValue + vImgValue + ";";
});
$("#<%=hdnAssignedModules.ClientID%>").val(sAllValue);
$('#<%=lstAllModules.ClientID %>').click(function () {
if ($('#<%=lstAllModules.ClientID %> > option:selected').val() != '')
$('#btnAddModule').removeAttr('disabled');
else
$('#btnAddModule').attr('disabled', 'disabled');
});
$('#<%=lstAssigenedModules.ClientID %>').click(function () {
if ($('#<%=lstAssigenedModules.ClientID %> > option:selected').val() != '')
$('#btnRemModule').removeAttr('disabled');
else
$('#btnRemModule').attr('disabled', 'disabled');
});
$('#btnAddModule').click(
function (e) {
if ($('#<%=lstAllModules.ClientID %> > option:selected').appendTo($('#<%=lstAssigenedModules.ClientID %>')));
$('#btnAddModule').attr('disabled', 'disabled');
var sAllValue = '';
$("#<%=hdnAssignedModules.ClientID%>").val('');
$('#<%=lstAssigenedModules.ClientID %> > option').each(function () {
var vImgValue = $(this).val();
sAllValue = sAllValue + vImgValue + ";";
});
$("#<%=hdnAssignedModules.ClientID%>").val(sAllValue);
});
$('#btnRemModule').click(function (e) {
if ($('#<%=lstAssigenedModules.ClientID %> > option:selected').appendTo($('#<%=lstAllModules.ClientID %>')));
$('#btnRemModule').attr('disabled', 'disabled');
$("#<%=hdnAssignedModules.ClientID%>").val('');
var sAllValue = '';
$('#<%=lstAssigenedModules.ClientID %> > option').each(function () {
var vImgValue = $(this).val();
sAllValue = sAllValue + vImgValue + ";";
});
$("#<%=hdnAssignedModules.ClientID%>").val(sAllValue);
});
});
</script>
// Option 2: Javascript
<script type="text/javascript" language="javascript">
function move(tbFrom, tbTo) {
var arrFrom = new Array(); var arrTo = new Array();
var arrLU = new Array();
var i;
for (i = 0; i < tbTo.options.length; i++) {
arrLU[tbTo.options[i].text] = tbTo.options[i].value;
arrTo[i] = tbTo.options[i].text;
}
var fLength = 0;
var tLength = arrTo.length;
for (i = 0; i < tbFrom.options.length; i++) {
arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
if (tbFrom.options[i].selected && tbFrom.options[i].value != "") {
arrTo[tLength] = tbFrom.options[i].text;
tLength++;
}
else {
arrFrom[fLength] = tbFrom.options[i].text;
fLength++;
}
}
tbFrom.length = 0;
tbTo.length = 0;
var ii;
for (ii = 0; ii < arrFrom.length; ii++) {
var no = new Option();
no.value = arrLU[arrFrom[ii]];
no.text = arrFrom[ii];
tbFrom[ii] = no;
}
for (ii = 0; ii < arrTo.length; ii++) {
var no = new Option();
no.value = arrLU[arrTo[ii]];
no.text = arrTo[ii];
tbTo[ii] = no;
}
document.getElementById("SiteBody_hdnAssignedModules").value = "";
var sAllValue = '';
var list = document.getElementById('SiteBody_lstAssigenedModules');
for (i = 0; i < list.options.length; i++) {
sAllValue = sAllValue + list.options[i].value + ";";
}
document.getElementById("SiteBody_hdnAssignedModules").value = sAllValue;
document.getElementById("btnAddModule").disabled = true;
document.getElementById("btnRemModule").disabled = true;
}
function enableAddButton() {
var list = document.getElementById('SiteBody_lstAllModules');
if (list.options.length != 0) {
var indx = list.selectedIndex;
if (list[indx].value != '')
document.getElementById("btnAddModule").disabled = false;
else
document.getElementById("btnAddModule").disabled = true;
}
}
function enableRemoveButton() {
var list = document.getElementById('SiteBody_lstAssigenedModules');
if (list.options.length != 0) {
var indx = list.selectedIndex;
if (list[indx].value != '')
document.getElementById("btnRemModule").disabled = false;
else
document.getElementById("btnRemModule").disabled = true;
}
}
function SetAssignedModules() {
document.getElementById("SiteBody_hdnAssignedModules").value = "";
var sAllValue = '';
var list = document.getElementById('SiteBody_lstAssigenedModules');
for (i = 0; i < list.options.length; i++) {
sAllValue = sAllValue + list.options[i].value + ";";
}
document.getElementById("SiteBody_hdnAssignedModules").value = sAllValue;
}
</script>
PAGE:
<tr>
<td>
<asp:ListBox ID="lstAllModules" onClick="enableAddButton()" runat="server"></asp:ListBox>
</td>
<td>
<input type="button" id="btnAddModule" value="Add >>" style="width: 90px;"
disabled="disabled" onclick="move(this.form.SiteBody_lstAllModules,this.form.SiteBody_lstAssigenedModules)" />
<input type="button" id="btnRemModule" value="<< Remove" style="width: 90px;"
disabled="disabled" onclick="move(this.form.SiteBody_lstAssigenedModules,this.form.SiteBody_lstAllModules)" />
</td>
<td>
<asp:ListBox ID="lstAssigenedModules" onClick="enableRemoveButton()" runat="server">
</asp:ListBox>
<asp:HiddenField ID="hdnAssignedModules" runat="server" />
</td>
</tr>
NOTE:
* SetAssignedModules()-> Setting dropdown values to hidden feilds.
* Change Controls' Id.