Okay here is the situation:

I'm using PHP, Javscript and mySQL for this project. I have successfully created a dynamic drop down menu. The second drop drown will change depending on the what the user chooses for the first menu.

What I would like to do is have a button(picture) that can change the selected item in the second drop down menu using the onClick command.

For example, the first drop down is metal alloys, the second is the product line (I-Beam, Round, Hex, etc.). I have an accompanying picture of each of the product lines. So I would like the user to be able to click on the picture and have it change the value of the second drop down. I'm not sure if this can be done or how to access it through the DOM.

I REALLY need some help on this so any tips would be greatly appreciated. Thanks.

Here is the jist of the code I'm using (after PHP has translated the page):


<!-- ALLOY SELECT-->
<td colspan="8" width="112" height="42" align="left" valign="top" bgcolor="#999999">
<select class="drop" name="Alloy" onChange="alloyselected(this);" >
<option value="" class=""><b>Select an Alloy</b></option>
<option value="">---------------</option>

<option value='1'>Aluminum</option>
<option value='4'>Commercial</option>
<option value='3'>Copper</option>
<option value='5'>Nickel</option>
<option value='2'>Steel</option>
</select>

<!-- PRODUCT LINE SELECT -->
<select class="drop" name="proLine">
<option value="" class=""><b>Select an Alloy</b></option>
<option value="">---------------</option>
</select>

<SCRIPT LANGUAGE="JavaScript">
function alloyselected(elem){
for (var i = document.f1.proLine.options.length; i >= 0; i--){
document.f1.proLine.options[i] = null;
}
if (elem.options[elem.selectedIndex].value==1){
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Zee','18');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Angle','1');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','3');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('I-Beam','10');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Rectangle','13');
}
if (elem.options[elem.selectedIndex].value==4){
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hex','12');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Zee','19');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Angle','2');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','6');
}
if (elem.options[elem.selectedIndex].value==3){
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Round','8');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hex','11');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Channel','15');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','5');
}
if (elem.options[elem.selectedIndex].value==5){
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Rectangle','14');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Tee','17');
}
if (elem.options[elem.selectedIndex].value==2){
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Hollow Tube','4');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Round','7');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('I-Beam','9');
document.f1.proLine.options[document.f1.proLine.options.length] = new Option('Channel','16');

}
}

</SCRIPT>

Try something like this:

function setSelect(oSelect, sText) {
if (typeof oSelect == 'undefined') return false;
var opt, i = 0;
while (opt = oSelect.options[i++])
if (opt.text == sText) opt.selected = true;
return false;
}

Call like this:

<img style="cursor:hand;cursor:pointer;" alt="Hollow Tube" src="............" onclick="return setSelect(document.f1.proLine,this.alt)">

I'll try that out in a bit.. thanks


Basically I am also wondering what the correct syntax is to read/change a value in a drop down from another source (such as a menu or using onClick).

The form is:

document.f1.proLine

Thanks.

Option.value is just a (string) variable. Get a reference to it, then assign something:

document.f1.proLine.options[n].value = 'something';

...where n is its position in the list.

Of course, how you get the reference could vary depending on what data you use to find the particular option (like its .text property above).

I appreciate your ongoing help Cheesebagpipe.

Basically I don't really want to change the value of any drop downs as much as actually 'selecting' an option through the onClick command. This is because the values in the drop down are read from PHP/MySQL and are later used so I really just want (if possible) the drop down to change its 'focus' onto one of the list items. I've been trying through the function I have above but I'm not having any luck. Is there a way to do this directly through Javascript?

Thanks again.

So I would like the user to be able to click on the picture and have it change the value of the second drop down.I am also wondering what the correct syntax is to read/change a value in a drop down from another source
Basically I don't really want to change the value of any drop downs.... :rolleyes:

You need to be bit clearer about what you want. It's not 'focus' you're after - it's selecting the option programmatically, just as a user would manually. The above does that, using the passed text argument (representing the text shown for the option) as its criteria; it gets it from the alt attribute of the image, for convenience. You keep mentioning selecting an option, without being specific about what criteria you'll be using.

my apologies.. I know it's not the focus. Okay I've almost figured out my function but I'm getting some inconsistant results. Here is what I'm trying to do.

I will sent a value into the function. This value represents a product. (eg. 4 = Rectangle in mySQL database).

In the function I want to check to see if the second drop down menu (which is dynamically linked to the first) which is the product line contains the value passed into the function. If the drop down contains the value passed into it then it will select that item in the drop down (selectIndex). If there is no matching value (the product line is not in the drop down) then nothing will happen. I'm just not sure if I'm looping through the menu correctly.

I hope that clears things up a bit. I had things close this morning but somehow things have gotten messed up again.

Here is what I have


function dropchecker(product) {

i=1;
var menuitem;
var menulength = document.f1.proLine.options.length;
for (i=1; i<menulength; i++) {
menuitem = document.f1.proLine.options[i].value;
if ( menuitem == product) {
//document.write('there is a match');
document.f1.proLine.options.selectedIndex = product;

} else {
//document.write('sorry, no match');

}
}
}

function dropchecker(product) {
var menuitem, oSelect = document.f1.proLine;
var menulength = oSelect.options.length;
for (var i=1; i<menulength; i++) {
menuitem = oSelect.options[i].value;
if (menuitem == product) {
oSelect.options[i].selected = true;
return true;
}
}
}


Skip the document.write()s. Don't want to start a new web page.

Phew!

Cheers Mate!

Got it working.. only took me all day and your help. I've been learning the server side stuff for a while and I haven't used Javascript in a while (as you can probably tell).

But.... Since we're on the subject here. I'm basically having a similar problem. Same script as above but this time I want to change the first drop down menu. Now I've managed to actually change what is showing in the drop down but the problem is it's not dyanimcally 'updating' what's in the second drop down. I've been playing around but no luck. It uses the function alloyselect up above to do it's stuff.

Any ideas?