PDA

View Full Version : multi select list and switching items



proofke
12-21-2005, 03:17 PM
hey,

i'm trying to implement this stuff.
user x can acces client 1, client 2, client 4

i want this on my site, 2 list, one with the available clients, and the other
with the clients the user can access

when i change a client from list 1 to list 2 (or reverse), it need to be sort again. Also i got this bug, when i switch for the first time, it has also the selected clients in the available clients list. The script given works also with 2 arrays and 2 list, and sorting it.

hope u guys can help me, or have a better script so that i just have to set the 2 arrays.

Select the clients that the user may access.
Available clients Selected clients
client 3 >> client 1
client 5 client 2
client 6 << client 4
client 7

thanks in advance

copy this in a blank html or so


<html>
<body>


<h3>Choose clients</h3>


<script language="javascript">
var tab_clienttype=new Array(),tab_ids_client=new Array(),tab_clienttype_choosen=new Array(),i=0,available_client,selected_client;


tab_clienttype[106]="106;A.G.O.M. nv";
tab_ids_client[i]=106;
i++;

tab_clienttype[103]="103;Accountantskantoor Vercruysse & Partners BVBA";
tab_ids_client[i]=103;
i++;

tab_clienttype[8]="8;All Building Services nv";
tab_ids_client[i]=8;
i++;

tab_clienttype[115]="115;Alpin Cleaning Ent";
tab_ids_client[i]=115;
i++;

tab_clienttype[118]="118;Aronia nv";
tab_ids_client[i]=118;
i++;

tab_clienttype[235]="235;Belcompany";
tab_ids_client[i]=235;
i++;

tab_clienttype[274]="274;Brutyn2";
tab_ids_client[i]=274;
i++;

tab_clienttype[160]="160;BYS";
tab_ids_client[i]=160;
i++;

tab_clienttype[173]="173;CCandela";
tab_ids_client[i]=173;
i++;

tab_clienttype[126]="126;Cinderella Cibo nv";
tab_ids_client[i]=126;
i++;

tab_clienttype[127]="127;Cleandienst-Bouwschoon Vlaanderen nv";
tab_ids_client[i]=127;
i++;


function add_clienttype(formular)
{
if(eval("document."+formular+"."+available_client+".options").selectedIndex != -1)
{
if(eval("document."+formular+"."+selected_client+".options").length == 1)
{
if(eval("document."+formular+"."+selected_client).options[0].value == 0)
{

eval("document."+formular+"."+selected_client).options[0]=null;

}
}
}
pos=eval("document."+formular+"."+selected_client+".options").length;
for(i=0;i<eval("document."+formular+"."+available_client+".options").length;i++)
{
if(eval("document."+formular+"."+available_client+".options["+i+"]").selected)
{
strtempw=tab_clienttype[eval("document."+formular+"."+available_client+".options["+i+"]").value];
strtempw=strtempw.split(';');
strtemp2w=strtempw[0];
tab_clienttype_choosen[strtemp2w]=strtemp2w;
noption=new Option(strtempw[1],strtempw[0]);
eval("document."+formular+"."+selected_client).options[pos]=noption;
pos++;
}
}
reconstruction_clienttype(formular);
}

function reconstruction_clienttype(formular)
{
while(eval("document."+formular+"."+available_client+".options").length != 0)
{
eval("document."+formular+"."+available_client).options[0]=null;
}
pos=0;
for(i=0;i<tab_ids_client.length;i++)
{
if(tab_clienttype[tab_ids_client[i]] != null)
{
strtemp=tab_clienttype[tab_ids_client[i]];
strtemp=strtemp.split(';');
strtemp2=strtemp[0];
if(tab_clienttype_choosen[strtemp2] == null)
{
noption=new Option(strtemp[1],strtemp[0]);
eval("document."+formular+"."+available_client).options[pos]=noption;
pos++;
}
}
}
}

function remove_clienttype(id)
{
tab_clienttype_choosen[id]=id;
}

function delete_clienttype(formular)
{
i=0;
tab_temp_sect2=new Array();
while(i<eval("document."+formular+"."+selected_client+".options").length)
{
if(eval("document."+formular+"."+selected_client).options[i].selected)
{
eval("document."+formular+"."+selected_client).options[i].selected=false;
strtemp2=eval("document."+formular+"."+selected_client).options[i].value;
tab_clienttype_choosen[strtemp2]=null;

eval("document."+formular+"."+selected_client).options[i]=null;

i=0;
}
else
{
i++;
}

}

if(eval("document."+formular+"."+selected_client+".options").length == 0)
{
noption=new Option("[None]","0");
eval("document."+formular+"."+selected_client).options[0]=noption;
}
reconstruction_clienttype(formular);
}

function init_clienttype(select1,select2)
{
available_client=select1;
selected_client=select2;
}


function SelectAllList(CONTROL){
for(var i = 0;i < CONTROL.length;i++){
CONTROL.options[i].selected = true;
}
}

function DeselectAllList(CONTROL){
for(var i = 0;i < CONTROL.length;i++){
CONTROL.options[i].selected = false;
}
}

</script>

<script type="text/javascript" language="javascript">
init_clienttype("available_clienttype","selected_clienttype");
</script>
66<br/>
--<br/>

--,

<form action="/users/add_clients/66" method="post" name="formClients">
<table>
<tr>
<td colspan="3">Select the clients that the user may access.</td>
</tr>
<tr>
<td>Available clients</td>
<td>&nbsp;</td>
<td>Selected clients</td>
</tr>
<tr>
<td>
<a href="javascript:SelectAllList(document.formClients.available_clienttype);">select all</a>
&nbsp;&nbsp;
<a href="javascript:DeselectAllList(document.formClients.available_clienttype);">deselect all</a>
</td>
<td>&nbsp;</td>
<td>
<a href="javascript:SelectAllList(document.formClients.selected_clienttype);">select all</a>
&nbsp;&nbsp;
<a href="javascript:DeselectAllList(document.formClients.selected_clienttype);">deselect all</a>
</td>
</tr>
<tr>
<td>
<select name="available_clienttype[]" id="available_clienttype" multiple size="10" style="width:320px;" ondblclick="add_clienttype(this.form.name)">

<option value="103">Accountantskantoor Vercruysse & Partners BVBA</option>

<option value="8">All Building Services nv</option>

<option value="115">Alpin Cleaning Ent</option>

<option value="235">Belcompany</option>

<option value="160">BYS</option>

<option value="173">CCandela</option>

<option value="126">Cinderella Cibo nv</option>

<option value="127">Cleandienst-Bouwschoon Vlaanderen nv</option>

</select>
</td>
<td align="center">
<input name="btnLtoRWtype" type="Button" value=">>" onclick="add_clienttype(this.form.name);">
<br>
<input name="btnRtoLWtype" type="Button" value="<<" onclick="delete_clienttype(this.form.name);">
</td>
<td>
<select name="selected_clienttype[]" id="selected_clienttype" multiple size="10" style="width:320px;" ondblclick="delete_clienttype(this.form.name)">

<option value="106">A.G.O.M. nv</option>

<option value="118">Aronia nv</option>

<option value="274">Brutyn2</option>

</select>
</td>
</tr>
<tr>
<td colspan="3" class="right"><input name="commit" type="submit" value="Update" /><input id="user_id" name="user[id]" type="hidden" value="66" /></td>
</tr>
</table>
</form>


</body>
</html>