Copy drop-down value to another drop-down

[Wyrdathru]

Hello there, codingforum.net!

I'm a newbie to Javascript, HTML, XHTML, CSS-- and oh god, everything, so please bear with me! I have come to understand that to get any better, I'll need support. I hope you guys (and gals) can assist!

Here is my issue: I'm currently trying to develop a first-draft calculator that will allow me to calculate some values for work and the way I want it requires me to do it with a pair of drop-downs.

Take a look at it here:

http://www.projectvoid.co.uk/

I would like to select the first drop-down, on the left-hand side (Current Lighting Products -> Type of Lamp) and for the right-hand side to copy it's selected value (Energy Efficient Products -> Type of Lamp).

Furthermore, it shouldn't interfere with the fact that I'm also using those values with my dependent drop-down, below (Wattage).

The only piece of code I've found that might help is this:

function setSelect(name1, name2) 
{

var select1 = document.forms.formname.elements[name1];
var select2 = document.forms.formname.elements[name2];

select1.selectedIndex = select2.selectedIndex;

}

I am also unsure how to utilize it.

I look forward to your aid! Thank you in advance.

[Rowsdower!]

You can create a function to copy one select to the other:

function copy_selection(source_id,target_id){
	var source=document.getElementById(source_id);
	var target =document.getElementById(target_id);
	target.value=source.value;
	if(target_id=="product"){
		//we're updating the select element related to the parent select element with id of "product"
		dropdownlist2(target.value);
	}
	else if(target_id=="product_type"){
		//we're updating the select element related to the parent select element with id of "product_type"
		dropdownlist(target.value);
	}
	else{
		alert('Invalid target ID...');
	}
}

Then just add the appropriate function call to the inline javascript for your relevant select fields like so:

<select name="product_type" id="product_type" onChange="javascript: dropdownlist(this.options[this.selectedIndex].value);[ICODE]copy_selection('product_type','product');[/ICODE]".

<select name="product" id="product" onchange="javascript: dropdownlist2(this.options[this.selectedIndex].value);[ICODE]copy_selection('product','product_type');[/ICODE]">

This basic idea works in Firefox at least. I haven't tested it in IE.

[Wyrdathru]

Hey there, Rowsdower!

Thank you very much for the code, it works as is. I confirmed and it works with IE, so that's awesome-- but now I'd like to try and figure out what that code does.

Would you mind helping me?

The first question is about what this little piece of code does:

var rel="nofollow";

[Rowsdower!]

I have no idea what that is doing there. CF is adding that to my posted code... Weird. If I click "reply" that part of the posted code goes back to normal (meaning the rel="nofollow" goes away). If I try to edit my post it is also missing that piece of garbage.

Yet when viewed in the main thread it's there plain as day.

Well, anyway, that piece of code you posted should just be removed from the script you use in the page. I didn't add it and I can't seem to edit it out from here...

Edit: Note, you should keep the var part, just delete the rel="nofollow part"

[Wyrdathru]

That is strange! Thank you for your assistance!

I'm going to try and tackle another problem soon, but this should help me out for the time being.

Cheers!