Add list label to description in cart

I have a page which adds an item from a recordset to the shopping cart. On this page I also have an option dropdown. The site sells jewellery, and the option allows for the length of the chain for a necklace. There are two choices, choice 1 has a label of '16 inch' and a value of zero (as it doesn't cost any more than the standard price for this). The second option label is '18 inch' and the value is '8' as it costs an extra £8 for the longer chain.

The values are going into the cart quite nicely, and adding together where appropriate to give the correct price. What I need though is for the description in the shopping cart to show the label value from this option list along with the title, for example "Gold Pendant" needs to be "Gold Pendant 18 inch".

Any ideas as to how I could do this?

If you are storing the text of it being 16 or 18 inches long in the cart under the bindings tab you can drag the binding into the description area on your cart. This creates a dynamic text link to be printed and is what I've done with the pictures cart I am working on, I'm just not getting all the price data to get added properly.

There are a couple of ways you can get the label to appear in the cart as well. I think one of the easiest would be to use some js to set the label of the selected extra length to another hidden form element, then you can bind this hidden form element to a column in your cart that will hold the name of the extra length option.

The js to do this is not very complex, basically you just set the value of the hidden form element to be the text of the selected index for the select list. I think it is cleanest to use a function for this. Here is an example form with a select list and a text input to demonstrate how you can do this.

<form name="form1" id="form1" method="post" action="">
	<select name="select1" id="select1" onchange="setValue(this.options[this.selectedIndex].text, 'text1');">
    	<option value="0">none</option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
    <input type="text" name="text1" id="text1" />
</form>

And here is the js that will make this work.

<script type="text/javascript">
function setValue(theVal, theInput){
	document.getElementById(theInput).value = theVal;
}
</script>

You can even use this same function call to do this, you would just need to update the name of the hidden form element in the function call.