Mutable list box + grouping function = Ctrl key buggy

[radio]

I have a list box populated with some groups. All groups have a list
of related offices; I have these in the following xml format:
<Location>My Group 1</Location>
<Location Group="My Group 1">Office 1</Location>
<Location Group="My Group 1">Office 2</Location>
<Location>My Group 2</Location>
<Location Group="My Group 2">Office 1</Location>
<Location Group="My Group 2">Office 2</Location>

I have the following select box:
<select name="audienceLocation" size="6" multiple
onChange="tellGroup(this.options[selectedIndex].text);" >
</select>

Which calls the below function and finds a match with <Location> and
the Group element. So effectively if you click My Group 1, all of the
offices that are associated with My Group 1 are also selected.

function tellGroup(name)
{
var elements = (controlledVocabXml.documentElement.getElementsByTagName("Location"));
var audienceUnencoded = "";
for (j=0;j<[elements.length];j++)
{
var audienceElements = (elements[j].Group);
var audienceRegExp = new RegExp(audienceElements + "(,|$)+");
if (name.match(audienceRegExp) != null)
{document.theForm.audienceLocation.options[j].selected = true; }
}
}


This works, however, the problem I'm having is if the Ctrl key is held
while selecting another group (so the users can select multiple
groups) the function doesn't seem to work on the newly selected group.
I'm restricted to DOM level 1 as I'm writing code that has to work in
Dreamweaver's API.

Any help much appreciated

 

[Joakim Braun]

I have a list box populated with some groups. All groups have a list
of related offices; I have these in the following xml format:
<Location>My Group 1</Location>
<Location Group="My Group 1">Office 1</Location>
<Location Group="My Group 1">Office 2</Location>
<Location>My Group 2</Location>
<Location Group="My Group 2">Office 1</Location>
<Location Group="My Group 2">Office 2</Location>

I have the following select box:
<select name="audienceLocation" size="6" multiple
onChange="tellGroup(this.options[selectedIndex].text);" >
</select>

Which calls the below function and finds a match with <Location> and
the Group element. So effectively if you click My Group 1, all of the
offices that are associated with My Group 1 are also selected.

function tellGroup(name)
{
var elements = (controlledVocabXml.documentElement.getElementsByTagName("Location"));
var audienceUnencoded = "";
for (j=0;j<[elements.length];j++)
{
var audienceElements = (elements[j].Group);
var audienceRegExp = new RegExp(audienceElements + "(,|$)+");
if (name.match(audienceRegExp) != null)
{document.theForm.audienceLocation.options[j].selected = true; }
}
}


This works, however, the problem I'm having is if the Ctrl key is held
while selecting another group (so the users can select multiple
groups) the function doesn't seem to work on the newly selected group.
I'm restricted to DOM level 1 as I'm writing code that has to work in
Dreamweaver's API.

Any help much appreciated

Rewrite tellGroup to check for all options of audienceLocation whose
..selected is true.

selectedIndex is a single index into the options array, indicating the first
selected option. You can't "multiple-access" array elements with it.

Joakim Braun

 

[Joakim Braun]

I have the following select box:
<select name="audienceLocation" size="6" multiple
onChange="tellGroup(this.options[selectedIndex].text);" >
</select>

<snip>

Also, this won't work very well if nothing is selected (selectedIndex
is -1).

Joakim Braun

 

[radio peep]

Thanks Joakim, I’m a bit new to JavaScript. I’m gonna have a go at
Rewriting tellGroup (wish me luck) but I’m a bit stuck on how to make
this (onChange="tellGroup(this.options[selectedIndex].text);") not
through errors when nothing is selected. Got any suggestions here?

Many thanks

 

[Joakim Braun]

Thanks Joakim, I'm a bit new to JavaScript. I'm gonna have a go at
Rewriting tellGroup (wish me luck) but I'm a bit stuck on how to make
this (onChange="tellGroup(this.options[selectedIndex].text);") not
through errors when nothing is selected. Got any suggestions here?

Many thanks

Array access with a -1 index generates an error. So you must check for
selectedIndex==-1 first. So instead of accessing the array directly in the
onchange="...", you could do all the work in your tellGroup() function:

// Untested code, but this should be simple enough

var selIndex = document.someForm["someSelect"].selectedIndex;

if(selIndex > -1){

var theOptions = document.someForm["someSelect"].options;

for(var i = 0, max = theOptions.length; i < max; i++){

if(theOptions.selected){
// This option is selected - do stuff with it
}
}
}
else{
// do other stuff here if the previous selection has become unselected
}

Joakim Braun

 

[radio]

Thanks Joakim, with your help i'm pretty sure i've sorted it out.

cheers

Radio