how to move the elements within multiple listboxes using javascript

Discussion in 'JavaScript' started by smkannan, Nov 12, 2007.

0
  1. #1
    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:

    <!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="&nbsp;<<&nbsp;" onclick = "javascript: move(document.frmCreateUser.list,document.frmCreateUser.select);"/>
    </td>
    <td>
    <input type="button" name="btnSelect" value="&nbsp;>>&nbsp;" 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="&nbsp;<<&nbsp;" onclick = "javascript: move(document.frmCreateUser.list1,document.frmCreateUser.select1);"/>
    </td>
    <td>
    <input type="button" name="btnSelect1" value="&nbsp;>>&nbsp;" 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="&nbsp;<<&nbsp;" onclick = "javascript: move(document.frmCreateUser.list2,document.frmCreateUser.select2);"/>
    </td>
    <td>
    <input type="button" name="btnSelect2" value="&nbsp;>>&nbsp;" 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>
     
    smkannan, Nov 12, 2007 IP
  2. cjburkha

    cjburkha Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You have to break this down into a test case. Sorry, your code is just to long.

    Seperate into HTML and javascript and have a simple demonstration of what you are trying to accomplish.
     
    cjburkha, Nov 15, 2007 IP