Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

multiple select

Matt Ratliff
Guest
  
Posts: n/a
#1: Jul 31 '06
Hello,
I would appreciate any assistance you have with the following
problem:

I have (as an example) an array of values as follows:
arrayvalues=new Array("0001","0003","0005") where each is the value
of an option in a select statement:

<select id="usertypes" multiple="multiple">
<option value="0033">data1</option>
<option value="0025">data2</option>
<option value="0001">data3</option>
<option value="0003">data4</option>
<option value="1234">data5</option>
<option value="0005">data6</option>
</select>

Based on my array values I would like to highlight each option whose
value cooresponds to an element of my array. I have the following
javascript code:

usertypes=document.getElementById("usertypes");
for(var j=0; j<arrayvalues.length; j++)
for(var i=0; i<usertypes.options.length; i++)
{
if(usertypes.options[i].value==arrayvalues[j])
usertypes.options[i].selected=true;
}

Problem: Script will not highlight all options associated with my
array values. However, if I add an alert statement before or after
the if statement, the script will highlight each entry as needed.
Does anyone have any ideas on why this is happening?

Paul
Guest
  
Posts: n/a
#2: Jul 31 '06

re: multiple select


Matt Ratliff wrote:
Quote:
Hello,
I would appreciate any assistance you have with the following
problem:
>
I have (as an example) an array of values as follows:
arrayvalues=new Array("0001","0003","0005") where each is the value
of an option in a select statement:
>
<select id="usertypes" multiple="multiple">
<option value="0033">data1</option>
<option value="0025">data2</option>
<option value="0001">data3</option>
<option value="0003">data4</option>
<option value="1234">data5</option>
<option value="0005">data6</option>
</select>
>
Based on my array values I would like to highlight each option whose
value cooresponds to an element of my array. I have the following
javascript code:
>
usertypes=document.getElementById("usertypes");
for(var j=0; j<arrayvalues.length; j++)
for(var i=0; i<usertypes.options.length; i++)
{
if(usertypes.options[i].value==arrayvalues[j])
usertypes.options[i].selected=true;
}
>
Problem: Script will not highlight all options associated with my
array values. However, if I add an alert statement before or after
the if statement, the script will highlight each entry as needed.
Does anyone have any ideas on why this is happening?
I used the follwing to try to repeat the problem (based on assumptions
of your code fragments):

<script>
var arrayvalues=new Array("0001","0003","0005");

function setSelects(){
usertypes=document.getElementById("usertypes");
for(var j=0; j<arrayvalues.length; j++)
for(var i=0; i<usertypes.options.length; i++)
{
if(usertypes.options[i].value==arrayvalues[j])
usertypes.options[i].selected=true;
}
}
window.onload=setSelects;
</script>

<form>
<select id="usertypes" multiple="multiple">
<option value="0033">data1</option>
<option value="0025">data2</option>
<option value="0001">data3</option>
<option value="0003">data4</option>
<option value="1234">data5</option>
<option value="0005">data6</option>
</select>
</form>

However, it appears to work as you want it to (Firefox
1.5.05/Linux/Win2k & IE6).
Maybe the problem is how you are starting the script ?

Being one of those types who prefers to avoid nested loops, let me
suggest a little change to the script:
function setSelects(){
var inverted = new Array();
for(var i=0; i<arrayvalues.length; i++){
inverted[arrayvalues[i]] = true;
}

usertypes=document.getElementById("usertypes");
for(var i=0; i<usertypes.options.length; i++)
{
var curOpt = usertypes.options[i];
curOpt.selected = inverted[curOpt.value];
}
}
Matt Ratliff
Guest
  
Posts: n/a
#3: Jul 31 '06

re: multiple select

On 31 Jul 2006 08:04:06 -0700, "Paul" <pauledavis@gmail.comwrote:
Quote:
>
>Matt Ratliff wrote:
Quote:
>Hello,
> I would appreciate any assistance you have with the following
>problem:
>>
> I have (as an example) an array of values as follows:
> arrayvalues=new Array("0001","0003","0005") where each is the value
>of an option in a select statement:
>>
><select id="usertypes" multiple="multiple">
><option value="0033">data1</option>
><option value="0025">data2</option>
><option value="0001">data3</option>
><option value="0003">data4</option>
><option value="1234">data5</option>
><option value="0005">data6</option>
></select>
>>
>Based on my array values I would like to highlight each option whose
>value cooresponds to an element of my array. I have the following
>javascript code:
>>
>usertypes=document.getElementById("usertypes");
>for(var j=0; j<arrayvalues.length; j++)
> for(var i=0; i<usertypes.options.length; i++)
> {
> if(usertypes.options[i].value==arrayvalues[j])
> usertypes.options[i].selected=true;
> }
>>
>Problem: Script will not highlight all options associated with my
>array values. However, if I add an alert statement before or after
>the if statement, the script will highlight each entry as needed.
>Does anyone have any ideas on why this is happening?
>I used the follwing to try to repeat the problem (based on assumptions
>of your code fragments):
>
><script>
>var arrayvalues=new Array("0001","0003","0005");
>
>function setSelects(){
> usertypes=document.getElementById("usertypes");
> for(var j=0; j<arrayvalues.length; j++)
> for(var i=0; i<usertypes.options.length; i++)
> {
> if(usertypes.options[i].value==arrayvalues[j])
> usertypes.options[i].selected=true;
> }
>}
>window.onload=setSelects;
></script>
>
><form>
><select id="usertypes" multiple="multiple">
><option value="0033">data1</option>
><option value="0025">data2</option>
><option value="0001">data3</option>
><option value="0003">data4</option>
><option value="1234">data5</option>
><option value="0005">data6</option>
></select>
></form>
>
>However, it appears to work as you want it to (Firefox
>1.5.05/Linux/Win2k & IE6).
>Maybe the problem is how you are starting the script ?
>
>Being one of those types who prefers to avoid nested loops, let me
>suggest a little change to the script:
>function setSelects(){
> var inverted = new Array();
> for(var i=0; i<arrayvalues.length; i++){
> inverted[arrayvalues[i]] = true;
> }
>
> usertypes=document.getElementById("usertypes");
> for(var i=0; i<usertypes.options.length; i++)
> {
> var curOpt = usertypes.options[i];
> curOpt.selected = inverted[curOpt.value];
> }
>}
Paul:
Thanks for the response. I agree about the nested loops. My
actual code doesnt use nested loops but I wanted to try and describe
the problem in a way that could be more easily understood. Here is my
actual code snippet:

say '<script language="javascript">'
say 'opts=parent.document.getElementById("misc3");'
do zz=1 to xref4s~items
say 'opts.options['xref4s[zz]['FARMTYPEUID']-1'].selected=true;'
end
say '</script>'

xref4s is a server side array where xref4s[1]['FARMTYPEUID']
contains "0001" for example. My form data is passed to a hidden
iframe that contains the above code. The resulting code from the
script will look like:

opts.options[1].selected=true
opts.options[3].selected=true
opts.options[5].selected=true

when my xref4s array contains ("0002", "0004", "0006")

The strange thing is the fact that if I add an alert inside the do
loop then it properly selects all related options.
Paul
Guest
  
Posts: n/a
#4: Jul 31 '06

re: multiple select


Matt Ratliff wrote:
Quote:
On 31 Jul 2006 08:04:06 -0700, "Paul" <pauledavis@gmail.comwrote:
Quote:

Matt Ratliff wrote:
Quote:
Hello,
I would appreciate any assistance you have with the following
problem:
>
I have (as an example) an array of values as follows:
arrayvalues=new Array("0001","0003","0005") where each is the value
of an option in a select statement:
>
<select id="usertypes" multiple="multiple">
<option value="0033">data1</option>
<option value="0025">data2</option>
<option value="0001">data3</option>
<option value="0003">data4</option>
<option value="1234">data5</option>
<option value="0005">data6</option>
</select>
>
Based on my array values I would like to highlight each option whose
value cooresponds to an element of my array. I have the following
javascript code:
>
usertypes=document.getElementById("usertypes");
for(var j=0; j<arrayvalues.length; j++)
for(var i=0; i<usertypes.options.length; i++)
{
if(usertypes.options[i].value==arrayvalues[j])
usertypes.options[i].selected=true;
}
>
Problem: Script will not highlight all options associated with my
array values. However, if I add an alert statement before or after
the if statement, the script will highlight each entry as needed.
Does anyone have any ideas on why this is happening?
I used the follwing to try to repeat the problem (based on assumptions
of your code fragments):

<script>
var arrayvalues=new Array("0001","0003","0005");

function setSelects(){
usertypes=document.getElementById("usertypes");
for(var j=0; j<arrayvalues.length; j++)
for(var i=0; i<usertypes.options.length; i++)
{
if(usertypes.options[i].value==arrayvalues[j])
usertypes.options[i].selected=true;
}
}
window.onload=setSelects;
</script>

<form>
<select id="usertypes" multiple="multiple">
<option value="0033">data1</option>
<option value="0025">data2</option>
<option value="0001">data3</option>
<option value="0003">data4</option>
<option value="1234">data5</option>
<option value="0005">data6</option>
</select>
</form>

However, it appears to work as you want it to (Firefox
1.5.05/Linux/Win2k & IE6).
Maybe the problem is how you are starting the script ?

Being one of those types who prefers to avoid nested loops, let me
suggest a little change to the script:
function setSelects(){
var inverted = new Array();
for(var i=0; i<arrayvalues.length; i++){
inverted[arrayvalues[i]] = true;
}

usertypes=document.getElementById("usertypes");
for(var i=0; i<usertypes.options.length; i++)
{
var curOpt = usertypes.options[i];
curOpt.selected = inverted[curOpt.value];
}
}
>
Paul:
Thanks for the response. I agree about the nested loops. My
actual code doesnt use nested loops but I wanted to try and describe
the problem in a way that could be more easily understood. Here is my
actual code snippet:
>
say '<script language="javascript">'
say 'opts=parent.document.getElementById("misc3");'
do zz=1 to xref4s~items
say 'opts.options['xref4s[zz]['FARMTYPEUID']-1'].selected=true;'
end
say '</script>'
>
xref4s is a server side array where xref4s[1]['FARMTYPEUID']
contains "0001" for example. My form data is passed to a hidden
iframe that contains the above code. The resulting code from the
script will look like:
>
opts.options[1].selected=true
opts.options[3].selected=true
opts.options[5].selected=true
>
when my xref4s array contains ("0002", "0004", "0006")
>
The strange thing is the fact that if I add an alert inside the do
loop then it properly selects all related options.
Ahh, now that is more informative. I suspect that the javascript is
executing before the browser has built the references to the html
components. Using the javascript console on Mozilla/Firefox should
confirm this.
Try wrapping that up in a function called after the page loads.
Matt Ratliff
Guest
  
Posts: n/a
#5: Jul 31 '06

re: multiple select

On 31 Jul 2006 10:14:55 -0700, "Paul" <pauledavis@gmail.comwrote:
Quote:
>
>Matt Ratliff wrote:
Quote:
>On 31 Jul 2006 08:04:06 -0700, "Paul" <pauledavis@gmail.comwrote:
Quote:
>
>Matt Ratliff wrote:
>Hello,
> I would appreciate any assistance you have with the following
>problem:
>>
> I have (as an example) an array of values as follows:
> arrayvalues=new Array("0001","0003","0005") where each is the value
>of an option in a select statement:
>>
><select id="usertypes" multiple="multiple">
><option value="0033">data1</option>
><option value="0025">data2</option>
><option value="0001">data3</option>
><option value="0003">data4</option>
><option value="1234">data5</option>
><option value="0005">data6</option>
></select>
>>
>Based on my array values I would like to highlight each option whose
>value cooresponds to an element of my array. I have the following
>javascript code:
>>
>usertypes=document.getElementById("usertypes");
>for(var j=0; j<arrayvalues.length; j++)
> for(var i=0; i<usertypes.options.length; i++)
> {
> if(usertypes.options[i].value==arrayvalues[j])
> usertypes.options[i].selected=true;
> }
>>
>Problem: Script will not highlight all options associated with my
>array values. However, if I add an alert statement before or after
>the if statement, the script will highlight each entry as needed.
>Does anyone have any ideas on why this is happening?
>I used the follwing to try to repeat the problem (based on assumptions
>of your code fragments):
>
><script>
>var arrayvalues=new Array("0001","0003","0005");
>
>function setSelects(){
> usertypes=document.getElementById("usertypes");
> for(var j=0; j<arrayvalues.length; j++)
> for(var i=0; i<usertypes.options.length; i++)
> {
> if(usertypes.options[i].value==arrayvalues[j])
> usertypes.options[i].selected=true;
> }
>}
>window.onload=setSelects;
></script>
>
><form>
><select id="usertypes" multiple="multiple">
><option value="0033">data1</option>
><option value="0025">data2</option>
><option value="0001">data3</option>
><option value="0003">data4</option>
><option value="1234">data5</option>
><option value="0005">data6</option>
></select>
></form>
>
>However, it appears to work as you want it to (Firefox
>1.5.05/Linux/Win2k & IE6).
>Maybe the problem is how you are starting the script ?
>
>Being one of those types who prefers to avoid nested loops, let me
>suggest a little change to the script:
>function setSelects(){
> var inverted = new Array();
> for(var i=0; i<arrayvalues.length; i++){
> inverted[arrayvalues[i]] = true;
> }
>
> usertypes=document.getElementById("usertypes");
> for(var i=0; i<usertypes.options.length; i++)
> {
> var curOpt = usertypes.options[i];
> curOpt.selected = inverted[curOpt.value];
> }
>}
>>
>Paul:
> Thanks for the response. I agree about the nested loops. My
>actual code doesnt use nested loops but I wanted to try and describe
>the problem in a way that could be more easily understood. Here is my
>actual code snippet:
>>
> say '<script language="javascript">'
> say 'opts=parent.document.getElementById("misc3");'
> do zz=1 to xref4s~items
> say 'opts.options['xref4s[zz]['FARMTYPEUID']-1'].selected=true;'
> end
> say '</script>'
>>
> xref4s is a server side array where xref4s[1]['FARMTYPEUID']
>contains "0001" for example. My form data is passed to a hidden
>iframe that contains the above code. The resulting code from the
>script will look like:
>>
> opts.options[1].selected=true
> opts.options[3].selected=true
> opts.options[5].selected=true
>>
> when my xref4s array contains ("0002", "0004", "0006")
>>
>The strange thing is the fact that if I add an alert inside the do
>loop then it properly selects all related options.
>
>Ahh, now that is more informative. I suspect that the javascript is
>executing before the browser has built the references to the html
>components. Using the javascript console on Mozilla/Firefox should
>confirm this.
>Try wrapping that up in a function called after the page loads.
Paul,
Okay, that did it. By adding the alert it must have given the
script the time it needed to reference the component. After the last
coorespondence I added this code which worked for the time being. It
used the same principle that you were reffering to, by waiting for the
script to complete:

call charout , 'window.onload += '
call charout , 'setTimeout('''
call charout , 'opts=parent.document.getElementById("misc3");'
do zz=1 to xref4s~items
call charout , '
opts.options['xref4s[zz]['FARMTYPEUID']-1'].selected=true;'
end
call charout , ''',100)'
call charout , '0d0a'x

It built a string of the data, and passed it to the setTimeout
function to wait 100 ms. By appending it the window.onload it was
waiting until the load completed before processing the commands. I
really didnt even need the setTimeout function. The end result was as
you suggested. I replaced this with a function call invoked by the
windows onload event. Thanks for the help!
Closed Thread

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,419 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved