[thelist] javascript: dynamic select box Question

[Brian Cummiskey]

i'm developing a form for a small controlled intranet project (all ie6 
win 2k/xp) in which there are several options that need to be hidden and 
dynamically changed based on the previous entered form field.

What i need to do, so to select an option from a select box named 
selcooler_type when the select box named selPromoType is changed to 
"Cold Cooler Purchase Promo"


here's what i have so far.
The purchase price is changed to 69.95 as desired, but i can't get it to 
affect the select form element for the new/refurbished options.



function togglepromo()
{
	var theform = document.frmOrderInfo;

	if (theform.selPromoType.value == "Cold Cooler Purchase Promo")
	{
		cooler_rental.style.visibility = 'hidden';	
		cooler_buy.style.visibility = 'visible';
		theform.txtcooler_purchase_price.value = "69.95";
		theform.selcooler_type.options[selectedIndex].value = "REFURBISHED"; 
// <--- this line is what fails.

		//then once the value's are set for
		//txtcooloer_purchase_price and selcooler_type,
		//i want to hide the cooler_buy div
		//so they can't be changed
		cooler_buy.style.visibility = 'hidden';
		
	}

	else
	{
		//show all here, not necessary for this example.
	}
}

How can i change this drop down to "REFURBISHED"?





here's the xhtml:


<div id="promotion" class="boxit">
	<span class="left">What is the Promotion, please?</span>
	<span class="right">
	<select name="selPromoType" onchange="togglepromo();">
	        <option value=""></option>
		<option value="New Customer">New Customer</option>
		 <option value="Cold Cooler Purchase Promo">Cold Cooler Purchase 
Promo</option>	
	</select>
	</span>
</div>




<div id="cooler_buy" class="boxit">
	<span class="left">What is the purchase price for the cooler?</span>
	<span class="right"><input type="text" name="txtcooler_purchase_price" />
	</span>
	<br />
	<span class="left">Is this a NEW or REFURBISHED cooler?</span>
	<span class="right">
	<select name="selcooler_type">
		<option value=""></option>
		<option value="NEW">NEW</option>
		<option value="REFURBISHED">REFURBISHED</option>
	</select>
	</span>
</div>