Often I only want a site visitor to make a single menu choice, but need their selection to populate a number of items instead of just the usual single option value. Also, I usually don’t even want them to see what their single selection has spawned such as prices changes in a shopping cart, thus eliminating just asking them for all the values.

So here is how I take advantage of using the option element’s LABEL as well as ID and TITLE to define more values.

First the form’s select pulldown menu options – note the addition of ID and TITLE tags to give us our additional values:

<option id=”Op1″ title=”01″ value=”100″>Option 1 </option>
<option id=”Op2″ title=”02″ value=”200″>Option 2 </option>
<option id=”Op3″ title=”03″ value=”300″>Option 3 </option>

Now the JavaScript that makes it happen:

<script>
function changeValues(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

</script>

Now to call the function, we need to add an onChange command to the select element, see how it is calling the ID, VALUE, LABEL(text) and TITLE:

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>

Now here is the full code put all together:

<script language=”JavaScript”>
<!–
function changePrice(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

–>
</script>

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,
this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>
<option value=”100″ id=”Op1″ title=”01″>Option 1
<option value=”200″ id=”Op2″ title=”02″>Option 2
<option value=”300″ id=”Op3″ title=”03″>Option 3
</select>

ID: <input name=”idvar” id=”idvar” type=”text”>
VALUE: <input name=”valuevar” id=”valuevar” type=”text”>
LABEL: <input name=”labelvar” id=”labelvar” type=”text”>
TITLE: <input name=”titlevar” id=”titlevar” type=”text”>

(Please note that the fields you pass the values to can easily be changed to hidden type instead of text so the visitor doesn’t even see them.)

Click here to see a demo

This entry was posted on Wednesday, July 9th, 2008 at 2:55 am and is filed under HTML, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.