Nov 13th, 2007, 06:53
|
|
New Member
|
|
Join Date: Nov 2007
Location: chennai
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
help needed for Moving elements across multiple listboxes
Hi,
I have about six list boxes which are related each other. By selecting one element in one list box, its children from other listboxes should move accordingly. can anyone help me in writing the script for the following html code.
HTML:
- HTML: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function move(nonSelectedGroup, selectedGroup) {
var totalGroup = new Array();
var selectedGroups = new Array();
var tempList = new Array();
var counter;
for(counter=0; counter<selectedGroup.options.length; counter++) {
tempList[selectedGroup.options[counter].text] = selectedGroup.options[counter].value;
selectedGroups[counter] = selectedGroup.options[counter].text;
}
var usrGroupLength = 0;
var selectedGroupLength = selectedGroups.length
for(counter=0; counter<nonSelectedGroup.options.length; counter++) {
tempList[nonSelectedGroup.options[counter].text] = nonSelectedGroup.options[counter].value;
if(nonSelectedGroup.options[counter].selected) {
selectedGroups[selectedGroupLength] = nonSelectedGroup.options[counter].text;
selectedGroupLength++;
} else {
totalGroup[usrGroupLength] = nonSelectedGroup.options[counter].text;
usrGroupLength++;
}
}
totalGroup.sort();
selectedGroups.sort();
nonSelectedGroup.length = 0;
selectedGroup.length = 0;
var temp;
for(temp=0; temp<totalGroup.length; temp++) {
var option = new Option();
option.value = tempList[totalGroup[temp]];
option.text = totalGroup[temp];
nonSelectedGroup[temp] = option;
}
for(temp=0; temp<selectedGroups.length; temp++) {
var option = new Option();
option.value = tempList[selectedGroups[temp]];
option.text = selectedGroups[temp];
selectedGroup[temp] = option;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="frmCreateUser">
<table>
<tr>
<td width="145">
<select name="select" multiple size="6" style="width:100%" ondblclick="javascript: move(document.frmCreateUser.select,document.frmCreateUser.list);">
<!-- <logic:present name="frmCreateUser" property="userGroups">
<logic:iterate id="id" name="frmCreateUser" property="userGroups">
<option value=<bean:write name="id" property="userGroupId"/>><bean:write name="id" property="userGroupName"/></option>
</logic:iterate>
</logic:present>-->
<option value="1">univ1</option>
<option value="2">univ2</option>
<option value="3">univ3</option>
<option value="4">univ4</option>
</select>
</td>
<td>
<input type="button" name="btnRemove" value=" << " onclick = "javascript: move(document.frmCreateUser.list,document.frmCreateUser.select);"/>
</td>
<td>
<input type="button" name="btnSelect" value=" >> " onclick="javascript: move(document.frmCreateUser.select,document.frmCreateUser.list);"/>
</td>
<td width="300px">
<select name="list" multiple size="6" style="width:100%" ondblclick="javascript: move(document.frmCreateUser.list,document.frmCreateUser.select);">
<!--<logic:present name="frmCreateUser" property="userBelongingGroups">
<logic:iterate id="id" name="frmCreateUser" property="userBelongingGroups">
<option value=<bean:write name="id" property="userGroupId"/>><bean:write name="id" property="userGroupName"/></option>
</logic:iterate>
</logic:present>-->
<option value="5">univ5</option>
<option value="6">univ6</option>
<option value="7">univ7</option>
<option value="8">univ8</option>
</select>
</td>
</tr>
<tr>
<td width="145">
<select name="select1" multiple size="6" style="width:100%" ondblclick="javascript: move(document.frmCreateUser.select1,document.frmCreateUser.list1);">
<!-- <logic:present name="frmCreateUser" property="userGroups">
<logic:iterate id="id" name="frmCreateUser" property="userGroups">
<option value=<bean:write name="id" property="userGroupId"/>><bean:write name="id" property="userGroupName"/></option>
</logic:iterate>
</logic:present>-->
<option value="9">univ1 - college1</option>
<option value="10">univ1 - college2</option>
<option value="11">univ2 - college3</option>
<option value="12">univ3 - college4</option>
</select>
</td>
<td>
<input type="button" name="btnRemove1" value=" << " onclick = "javascript: move(document.frmCreateUser.list1,document.frmCreateUser.select1);"/>
</td>
<td>
<input type="button" name="btnSelect1" value=" >> " onclick="javascript: move(document.frmCreateUser.select1,document.frmCreateUser.list1);"/>
</td>
<td width="300px">
<select name="list1" multiple size="6" style="width:100%" ondblclick="javascript: move(document.frmCreateUser.list1,document.frmCreateUser.select1);">
<!--<logic:present name="frmCreateUser" property="userBelongingGroups">
<logic:iterate id="id" name="frmCreateUser" property="userBelongingGroups">
<option value=<bean:write name="id" property="userGroupId"/>><bean:write name="id" property="userGroupName"/></option>
</logic:iterate>
</logic:present>-->
<option value="13">univ2 - college5</option>
<option value="14">univ3 - college6</option>
<option value="15">univ4 - college7</option>
<option value="16">univ4 - college8</option>
</select>
</td>
</tr>
<tr>
<td width="145">
<select name="select2" multiple size="6" style="width:100%" ondblclick="javascript: move(document.frmCreateUser.select2,document.frmCreateUser.list2);">
<!-- <logic:present name="frmCreateUser" property="userGroups">
<logic:iterate id="id" name="frmCreateUser" property="userGroups">
<option value=<bean:write name="id" property="userGroupId"/>><bean:write name="id" property="userGroupName"/></option>
</logic:iterate>
</logic:present>-->
<option value="17">univ1 - college1 - dept1</option>
<option value="18">univ1 - college2 - dept2</option>
<option value="19">univ1 - college2 - dept3</option>
<option value="20">univ2 - college3 - dept4</option>
</select>
</td>
<td>
<input type="button" name="btnRemove2" value=" << " onclick = "javascript: move(document.frmCreateUser.list2,document.frmCreateUser.select2);"/>
</td>
<td>
<input type="button" name="btnSelect2" value=" >> " onclick="javascript: move(document.frmCreateUser.select2,document.frmCreateUser.list2);"/>
</td>
<td width="300px">
<select name="list2" multiple size="6" style="width:100%" ondblclick="javascript: move(document.frmCreateUser.list2,document.frmCreateUser.select2);">
<!--<logic:present name="frmCreateUser" property="userBelongingGroups">
<logic:iterate id="id" name="frmCreateUser" property="userBelongingGroups">
<option value=<bean:write name="id" property="userGroupId"/>><bean:write name="id" property="userGroupName"/></option>
</logic:iterate>
</logic:present>-->
<option value="24">univ2 - college5 - dept5</option>
<option value="25">univ2 - college5 - dept6</option>
<option value="26">univ3 - college6 - dept7</option>
<option value="27">univ4 - college8 - dept8</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Last edited by c010depunkk; Nov 13th, 2007 at 10:42.
Reason: please use [HTML] tags when displaying HTML
|
help needed for Moving elements across multiple listboxes
Similar Threads
