...

View Full Version : Dynamic Lists



NancyJ
01-24-2006, 05:13 PM
Ok, so this is what I want to do - it may not be possible but I thought if anyone knows, its you guys.
I have a form that has a dynamic number of select boxes.
Each of the select boxes are generated dynamically, but they all have the same values.
I want to build it so that if a value is selected in one of the boxes, it is removed from all the others. And if the value is changed, the value goes back in to all.

vwphillips
01-24-2006, 05:59 PM
working on this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body onload="InitSel('fred');">
<a id="fred" >
<select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
<select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
<select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
<select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
<select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
</a>
<br>
<a >
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;">
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
</select>
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
</select>
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
</select>
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
</select>
</a>
<br>

<a id="Tom" >
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;">
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
</select>
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
</select>
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
</select>
<select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
<option value="0" >Tom</option>
<option value="0" >Dick</option>
<option value="0" >Charley</option>
<option value="0" >Harry</option>
<option value="0" >Joe</option>
<option value="0" >Charley</option>
<option value="0" >Charley</option>
<option value="0" >Charley</option>
<option value="0" >Charley</option>
<option value="0" >Vic</option>
</select>
</a>
<script language="JavaScript" type="text/javascript">
<!--

function InitSel(zxcid,zxcsrt){
var zxcp=document.getElementById(zxcid);
var zxcsels=zxcp.getElementsByTagName('SELECT');
for (zxc0=0;zxc0<zxcsels.length;zxc0++){
zxcsels[zxc0].options[0]=new Option('Select','',true,true);
for (zxc1=1;zxc1<50;zxc1++){
zxcsels[zxc0].options[zxc1]=new Option(zxcFormatNu(zxc1),zxcFormatNu(zxc1),true,true);
}
zxcsels[zxc0].selectedIndex=0;
}
}

function zxcFormatNu(zxcnu){
if (zxcnu<10){ zxcnu='0'+zxcnu; }
return zxcnu;
}


//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Remove Select Duplicates f53Part1 (23-Jan-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// When an option from one SelectList in a group is selected
// any other SelectList in the group options with the same text will be removed
// reselection of another option will replace the previous option.


// DRAFT

function zxcSelInit(zxcsobj,zxcsrt){
zxcsrt=zxcsrt||0;
var zxcp=zxcsobj.parentNode;
zxcp.ary=[];
var zxcsels=zxcp.getElementsByTagName('SELECT');
for (zxcA0=0;zxcA0<zxcsels.length;zxcA0++){
zxcsels[zxcA0].ary=zxcp.ary;
zxcp.ary.push(zxcsels[zxcA0]);
zxcsels[zxcA0].last=null;
zxcsels[zxcA0].srt=zxcsrt;
}
return zxcp.ary;
}



function zxcRemoveDuplicates(zxcobj,zxcsrt){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj.ary){ zxcSelInit(zxcobj,zxcsrt); }
for (zxcB0=0;zxcB0<zxcobj.ary.length;zxcB0++){
zxcobj.ary[zxcB0].si=zxcobj.ary[zxcB0].options[zxcobj.ary[zxcB0].selectedIndex].text;
}
for (zxcB1=0;zxcB1<zxcobj.ary.length;zxcB1++){
if (zxcobj.ary[zxcB1]!=zxcobj){
zxcFill(zxcobj.ary[zxcB1],zxcobj.si);
}
}
if (zxcobj.last&&zxcobj.last!=zxcobj.options[zxcobj.selectedIndex]){
for (zxcB2=0;zxcB2<zxcobj.ary.length;zxcB2++){
if (zxcobj.ary[zxcB2]!=zxcobj){
zxcobj.ary[zxcB2].options[zxcobj.ary[zxcB2].options.length]=new Option(zxcobj.last.text,zxcobj.last.value,true,true);
}
}
}
zxcobj.last=zxcobj.options[zxcobj.selectedIndex];
for (zxcB3=0;zxcB3<zxcobj.ary.length;zxcB3++){
zxcFill(zxcobj.ary[zxcB3],null);
zxcobj.ary[zxcB3].selectedIndex=0;
for (zxcB4=zxcobj.ary[zxcB3].srt;zxcB4<zxcobj.ary[zxcB3].options.length;zxcB4++){
if (zxcobj.ary[zxcB3].options[zxcB4].text==zxcobj.ary[zxcB3].si){
zxcobj.ary[zxcB3].selectedIndex=zxcB4;
}
}
}
}

function zxcFill(zxcary,zxcm){
var zxcoptions=zxcOptionAry(zxcary);
zxcoption=zxcoptions.sort(zxcSortOptions);
zxcary.options.length=zxcary.srt;
for (zxcC0=0;zxcC0<zxcoptions.length;zxcC0++){
if (zxcoptions[zxcC0].text!=zxcm){
zxcary.options[zxcary.options.length]=new Option(zxcoptions[zxcC0].text,zxcoptions[zxcC0].value,true,true);
}
}
}

function zxcOptionAry(zxcary){
var zxcoptions=[];
for (zxcD0=zxcary.srt;zxcD0<zxcary.options.length;zxcD0++){
zxcoptions.push(zxcary.options[zxcD0]);
}
return zxcoptions
}

function zxcSortOptions(zxca,zxcb){
var zxcA=zxca.text;
var zxcB=zxcb.text;
if (zxcA<zxcB){ return -1; }
if (zxcA>zxcB){ return +1; }
return 0;
}

//-->
</script>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
</form>


</body>

</html>

vwphillips
01-24-2006, 10:58 PM
<script language="JavaScript" type="text/javascript">
<!--
// Remove SelectList Duplicates f53Part1 (24-Jan-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// SelectList Options ith duplicate text in a group of SelectLists
// may be removed on an event call.
// or
// When an option from one SelectList in a group is selected
// any other SelectList in the group options with the same text will be removed
// reselection of another option will replace the previous option.

// The script may be applied to as many SelectList Groups as required


// Application Notes

// All SelectList in a group must be nested in the same parent Node.
// e.g.
// <a >
// <select >
// <option value="0" >Tom</option>
// <option value="0" >Tom</option>
// <option value="0" >Dick</option>
// <option value="0" >Joe</option>
// <option value="0" >Harry</option>
// <option value="0" >Joe</option>
// <option value="0" >Charley</option>
// </select>
// <select >
// <option value="0" >Tom</option>
// <option value="0" >Nigel</option>
// <option value="0" >Joe</option>
// <option value="0" >Victor</option>
// <option value="0" >Joe</option>
// <option value="0" >Charley</option>
// </select>
// </a>

// To Remove All Duplicates with a single Event Call

// The parent node must be allocated a unique ID name

// The call is to function f53InitNoDuplicates('*IDName*',*FirstOption*,*Sort*);
// where:
// *IDName* = the unique ID name of the parent node. (string)
// *FirstOption* = the first option to be checked for duplicate or to be sorted. (digit)
// *Sort* = (optional) true = alpha sort the options against the option text. (true or false)

// To Remove All Duplicates on a onchange event
// Each SelectList must have an onChange event call to function f53RemoveDuplicates(this,0);
// where:
// parameter 0 = the unique ID name of the SelectList or the SelectList object. (digit)
// parameter 1 = the first option to be checked for duplicate or to be sorted. (digit)
// Note - options are alph sorted by default.

// Note:
// All SelectList calls in the group must have an idential parameter 1.
// Reselection of another SelectList option will replace the previous option to the other SelectLists.

// All variable, function etc. names are prefixed with 'f53' to minimise conflicts with other JavaScripts

// The functional code(3.0K) is best as an external JavaScript

// Tested with IE6 and Mozilla FireFox


// Functional Code - NO NEED to Change

function f53SelInit(f53sobj,f53srt){
if (typeof(f53sobj)=='string'){ f53sobj=document.getElementById(f53sobj); }
f53srt=f53srt||0;
var f53p=f53sobj.parentNode;
f53p.ary=[];
var f53sels=f53p.getElementsByTagName('SELECT');
for (f53A0=0;f53A0<f53sels.length;f53A0++){
f53sels[f53A0].ary=f53p.ary;
f53p.ary.push(f53sels[f53A0]);
f53sels[f53A0].last=null;
f53sels[f53A0].srt=f53srt;
}
return f53p;
}

function f53InitNoDuplicates(f53id,f53srt,f53sot){
var f53obj=f53SelInit(document.getElementById(f53id).getElementsByTagName('SELECT')[0],f53srt)
for (f53D0=0;f53D0<f53obj.ary.length;f53D0++){
f53SelOpts(f53obj.ary[f53D0],f53obj.ary[f53D0].srt)
if (f53sot){ f53obj.ary[f53D0].opts.sort(f53SortOptions); }
}
var f53srng='';
for (f53D1=0;f53D1<f53obj.ary.length;f53D1++){
for (f53D2=0;f53D2<f53obj.ary[f53D1].opts.length;f53D2++){
if (!f53srng.match(f53obj.ary[f53D1].opts[f53D2][1])){
f53srng+=f53obj.ary[f53D1].opts[f53D2][1]+',';
f53obj.ary[f53D1].appendChild(f53obj.ary[f53D1].opts[f53D2][0]);
}
}
}
}

function f53RemoveDuplicates(f53obj,f53srt){
if (typeof(f53obj)=='string'){ f53obj=document.getElementById(f53obj); }
if (!f53obj.ary){ f53SelInit(f53obj,f53srt); }
if (f53obj.replace){
for (f53B0=0;f53B0<f53obj.replace.length;f53B0++){
f53obj.replace[f53B0][0].appendChild(f53obj.replace[f53B0][1]);
}
}
f53obj.last=f53obj.options[f53obj.selectedIndex];
for (f53B1=0;f53B1<f53obj.ary.length;f53B1++){
f53obj.ary[f53B1].si=f53obj.ary[f53B1].options[f53obj.ary[f53B1].selectedIndex].text;
if (f53obj.ary[f53B1]!=f53obj){
f53SelOpts(f53obj.ary[f53B1],f53srt);
f53obj.ary[f53B1].opts.sort(f53SortOptions);
}
}
f53obj.replace=[];
for (f53B2=0;f53B2<f53obj.ary.length;f53B2++){
if (f53obj.ary[f53B2]!=f53obj){
for (var f53B3=0;f53B3<f53obj.ary[f53B2].opts.length;f53B3++){
if (f53obj.ary[f53B2].opts[f53B3][1]!=f53obj.si){
f53obj.ary[f53B2].appendChild(f53obj.ary[f53B2].opts[f53B3][0]);
}
else {
f53obj.replace.push([f53obj.ary[f53B2],f53obj.ary[f53B2].opts[f53B3][0].cloneNode(true)]);
}
}
}
}
for (f53B3=0;f53B3<f53obj.ary.length;f53B3++){
f53obj.ary[f53B3].selectedIndex=0;
for (f53B4=f53obj.ary[f53B3].srt;f53B4<f53obj.ary[f53B3].options.length;f53B4++){
if (f53obj.ary[f53B3].options[f53B4].text==f53obj.ary[f53B3].si){
f53obj.ary[f53B3].selectedIndex=f53B4;
}
}
}
}

function f53SelOpts(f53sobj,f53srt){
f53sobj.opts=[]; f53sobj.old=[];
for (var f53C0=f53srt;f53C0<f53sobj.options.length;f53C0++){
f53sobj.opts.push([f53sobj.options[f53C0].cloneNode(true),f53sobj.options[f53C0].text]);
f53sobj.old.push(f53sobj.options[f53C0]);
}
for (var f53C1=0;f53C1<f53sobj.old.length;f53C1++){
f53sobj.removeChild(f53sobj.old[f53C1])
}
}

function f53SortOptions(f53a,f53b){
var f53A=f53a[1]; var f53B=f53b[1];
if (f53A<f53B){ return -1; }
if (f53A>f53B){ return +1; }
return 0;
}

//-->
</script>

NancyJ
01-25-2006, 10:36 AM
Wow, thats some narly code. Gonna take me a while to work through it all but its up and running. Needs some work to fit my app and to get options put back when you deselect them, a little slow with the 40+ fields I've got but its a HUGE step in the right direction.
I assume you developed this for one of your little projects and you did go to all that trouble just for little 'ol me ;)

vwphillips
01-25-2006, 11:00 AM
and to get options put back when you deselect them,

does this not meet requirement


// reselection of another option will replace the previous option.

was thinking of adding a function to restore all original options


ume you developed this for one of your little proj

see

http://www.vicsjavascripts.org.uk

NancyJ
01-25-2006, 11:45 AM
I've found the problem, I took the sorting out (I want them to stay in the order they are originally) and when the option went back in, it went in at the bottom and for some reason I couldnt find it.
I'll look at modifying the search function to sort by value rather than text - they have numerical values.

vwphillips
01-25-2006, 01:15 PM
function f53SelOpts(f53sobj,f53srt){
f53sobj.opts=[]; f53sobj.old=[];
var f53restore;
if (!f53sobj.restore){ f53sobj.restore=[]; f53restore=true; }
for (var f53C0=f53srt;f53C0<f53sobj.options.length;f53C0++){
f53sobj.opts.push([f53sobj.options[f53C0].cloneNode(true),f53sobj.options[f53C0].text,f53sobj.options[f53C0].value]);
if (f53restore){ f53sobj.restore.push(f53sobj.options[f53C0].cloneNode(true)); }
f53sobj.old.push(f53sobj.options[f53C0]);
}
for (var f53C1=0;f53C1<f53sobj.old.length;f53C1++){
f53sobj.removeChild(f53sobj.old[f53C1])
}
}

function f53SortOptions(f53a,f53b){
var f53A=f53a[2]; var f53B=f53b[2];
if (f53A<f53B){ return -1; }
if (f53A>f53B){ return +1; }
return 0;
}

NancyJ
01-26-2006, 04:07 PM
Sorry to be a pain but I've been trying to figure this out on my own for hours.
I have a blank entry in the drop downs with a value of -1. This entry is allowed to be used multiple times. I've tried modifying the script so that
if (obj.options[obj.selectedIndex].value<0) then it doesnt do the removing duplicates but does do the replace part but I just cant seem to fathom it.

vwphillips
01-26-2006, 06:14 PM
see

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f53

NancyJ
01-26-2006, 06:25 PM
In your Tom, Dick and Harry example, if you have a box with Tom selected, then select Harry, Tom isnt put back into the boxes. Poor Tom is gone forever....
Which is what happened when I tried to modify the script myself. I couldnt seem to separate the replace and remove parts of the function.

vwphillips
01-26-2006, 07:39 PM
try

function f53RemoveDuplicates(f53obj,f53srt,f53sort){
if (!f53obj.ary){ f53SelInit(f53obj,f53srt,f53sort); }
if (!f53obj.ary){ return; }
if (f53obj.replace){
for (f53B0=0;f53B0<f53obj.replace.length;f53B0++){
f53obj.replace[f53B0][0].appendChild(f53obj.replace[f53B0][1]);
}
}
f53obj.last=f53obj.options[f53obj.selectedIndex];
for (f53B1=0;f53B1<f53obj.ary.length;f53B1++){
f53obj.ary[f53B1].si=f53obj.ary[f53B1].options[f53obj.ary[f53B1].selectedIndex].text;
if (f53obj.ary[f53B1]!=f53obj){
f53SelOpts(f53obj.ary[f53B1],f53srt);
f53obj.ary[f53B1].opts.sort(f53SortOptions);
}
}
f53obj.replace=[];
for (f53B2=0;f53B2<f53obj.ary.length;f53B2++){
if (f53obj.ary[f53B2]!=f53obj){
for (var f53B3=0;f53B3<f53obj.ary[f53B2].opts.length;f53B3++){
if (f53obj.ary[f53B2].opts[f53B3][1]!=f53obj.si||f53obj.options[f53obj.selectedIndex].value.match('f53')){
f53obj.ary[f53B2].appendChild(f53obj.ary[f53B2].opts[f53B3][0]);
}
else {
f53obj.replace.push([f53obj.ary[f53B2],f53obj.ary[f53B2].opts[f53B3][0].cloneNode(true)]);
}
}
}
}
for (f53B3=0;f53B3<f53obj.ary.length;f53B3++){
f53obj.ary[f53B3].selectedIndex=0;
for (f53B4=f53obj.ary[f53B3].srt;f53B4<f53obj.ary[f53B3].options.length;f53B4++){
if (f53obj.ary[f53B3].options[f53B4].text==f53obj.ary[f53B3].si){
f53obj.ary[f53B3].selectedIndex=f53B4;
}
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum