selected index of drop down help...

[homerUK]

hi,

I have a pop up window which gets the values from the parent... I have some javascript in the popup window which, using a drop down box, will let the user select the background colour of the parent window.

What I want to do, is when the user opens the popup window to change the parent window background colour, for the current bgcolor to be highlighted in the drop down list....

here is an example of the code for the drop down on the popup window


<select name="bgColor">
<option style="background-color:#FF0000">#FF0000
<option style="background-color:#FFFF00">#FFFF00
<option style="background-color:#00FF00">#00FF00
etc etc
</select>



I was hoping that something like:


document.table.bgColor.value = window.opener.document.bgColor


so what I want is for the drop down list to already be selected with the current value.... is it something to do with "selected.index" or anything?!

thanks in advance for anyhelp..... :D

[chrismiceli]

on the popup script

parent.windowname.bgcolor = test;
for (var i = 0; i != test; i++) {
if (document.table.bgcolor.options[i].style.background-color == test) {
document.table.bgcolor.options[i].selected = true;
}
}

[homerUK]

hey chrismiceli,

cheers for this! I can see that it should work.... but for some reason, I get the following error:

"document.tablefrm.bgColor.options[...].style is null or not an object"

any ideas what might be causing this?!

thanks v much!!!! :thumbsup:

[chrismiceli]

let me see your code because that error isn't referring to mine.

[homerUK]

I used the following code:


test = table.bgColor;
if ((test != "") || (test != null)) {
for (var i=0; i!=test; i++) {
if (document.tablefrm.bgColor.options[i].backgroundColor == test) {
document.tablefrm.bgColor.options[i].selected = true;
}

}
}



I changed the code now, so I get the table background colour. This is all working ok...... so "test" is actually being populated. I tried your code, and first it said that "color" is not defined, because your code used "background-Color" so I think the JS was taking that as a sum or something!!??!!

When I read the code, it should work!! I think....!!

here is the select box:


<select name="bgColor" class="textbox">
<option>None</option>
<option style="background-color:#FF0000">#FF0000</option>
<option style="background-color:#FFFF00">#FFFF00</option>
etc
etc



thanks for all your help... much appreciated!!

[chrismiceli]

messed up on my code, let me try modifying yours

test = table.bgColor;
if ((test != "") || (test != null)) {
for (var i=0; i!=document.tablefrm.bgColor.length; i++) {
if (document.tablefrm.bgColor.options[i].backgroundColor == test) {
document.tablefrm.bgColor.options[i].selected = true;
}

}
}

and when do you make the tablefrm element? is it on that page or another?

[homerUK]

I set the table properties in the same page... so that is working for sure....

I have amended the code to test if it is actually matching the color to the selection...


test = table.bgColor;
var length = document.tablefrm.bgColor.length;

if ((test != "") || (test != null)) {
for (var i=0; i!=length; i++) {
if (document.tablefrm.bgColor.options[i].style.backgroundColor == test) {
//document.tablefrm.bgColor.options[i].selected = true;
alert("got one");
}
}
}


so if there is a match in the IF statement, it should pop up a mesage, but it doesnt. There are no errors..... but nothing happens.

I tried

if (document.tablefrm.bgColor.options[i].text == test)

but that didnt work........

:confused:

[cheesebagpipe]

First: how are you changing the color in the opener? You should be using the value property of the options:

<select name="bgColor" onchange="whatever()">
<option value="#FF0000" style="background-color:#FF0000">#FF0000</option>

Put this in the pop-up:

onload = function() {
if (!opener || opener.closed) return;
var openerBG = opener.document.bgColor;
var sel = document.forms[0].bgColor;
for (var i=0; i<sel.length; i++) {
if (sel.options[i].value == openerBG) {
sel.options[i].selected = true;
break;
}
}
}

[homerUK]

hi,

thanks very much to cheesebagpipe and especially chrismiceli for the help with this one! I managed to get it working with chrismiceli's code, but using the ".value" element ... I also had to make the color value toUpperCase, as it was not matching because of that!!

Thanks guys!!!

:thumbsup: :thumbsup: :thumbsup: