Text shown after a user selects an item on a drop down menu?

Question

I've been messing with this for days now and can't figure this out. I am new to this and others have tried helping me but its not working. I am basically trying to make a Drop Down menu form where when a user clicks on an item on the drop down list, a text appears next to the drop down or under it saying "You have clicked this" or anything I want such as "You have saved 10% by choosing this!"

Can somebody help with this? My current code is something like this:

<form>
<p align="center"><b>Select a Payment:</b>
<select id="setit" onchange="javascript:showRelatedValue(this.value)">
<option value="">Select one</option>
    <option value="">1 Month: $4.99</option>
    <option value="">3 Months: $14.99</option>
    <option value="">6 Months: $29.99</option></select>
<br />
<br />
     <input type="button" value="Add to Cart"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</p>
</form>
<script>
     function showRelatedValue(String value)
     {
         if(value==1 Month: $4.99)
         alert("You have selected One Month");
         if(value==3 Months: $14.99)
         alert("You have selected Three Months");
         if(value==6 Months: $29.99)
         alert("You have selected Six Months");
     }
</script>

Or is there a better way of doing this? Thanks for your time.

Answer 1

Try this - DEMO

<form>
<p align="center"><b>Select a Payment:</b>
<select id="setit" onchange="javascript:showRelatedValue(this.value)">
<option value="">Select one</option>
    <option value="1">1 Month: $4.99</option>
    <option value="3">3 Months: $14.99</option>
    <option value="6">6 Months: $29.99</option></select>
<br />
<br />
     <input type="button" value="Add to Cart"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</p>
</form>
<script>
     function showRelatedValue(value)
     {
         if(value==1)
         alert("You have selected One Month");
         if(value==3)
         alert("You have selected Three Months");
         if(value==6)
         alert("You have selected Six Months");
     }
</script>​

Answer 2

Save the values in your options.. Otherwise you would have to compare with the complete text..

<form>
<p align="center"><b>Select a Payment:</b>
<select id="setit" onchange="javascript:showRelatedValue(this.value)">
<option value="">Select one</option>
    <option value="4.99">1 Month: $4.99</option>
    <option value="14.99">3 Months: $14.99</option>
    <option value="29.99">6 Months: $29.99</option></select>
<br />
<br />
     <input type="button" value="Add to Cart"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</p>
</form>

<script>
     function showRelatedValue(value)
     {
         if(value== '4.99')
         alert("You have selected One Month");
         if(value== '14.99')
         alert("You have selected Three Months");
         if(value== '29.99')
         alert("You have selected Six Months");
     }
</script>

Answer 3

You don't have to specify the data type of the parameter

 function showRelatedValue(value)
 {
     if(value == '1')
        alert("You have selected One Month");
     else if(value == '3')
        alert("You have selected Three Months");
     else if(value == '6')
        alert("You have selected Six Months");
 }

Also no need of adding javascript in the onchange event onchange="showRelatedValue(this.value)"