I want to display two text strings depending on a user's selection from two drop down lists.
So there are two drop down options:
For each month option, I want to have a corresponding value. So for January option, the value would be "January Name." For each color option, there is also a corresponding value. So for green option, the value is "Green name."
Once the user selects both options (month AND color), I want the output to display a text with the concatenation of the two values.
So for example, if I select January and Green, the output will be:
If I change the month to something else, the name would update accordingly.
I put together some html/css code as a start http://jsfiddle.net/baumdexterous/ys3GS/. I would greatly appreciate if anyone could shed some light on how I could achieve this task using jquery! Also - how can I make the text output fade in?. Thank you so much!!!
<body>
<h2>Find your Animal Name</h2>
<p>Select your birth month and your favorite color and find your animal name.</p>
<form>
<select id="month">
<option value="">- birth month -</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<label class="January" for="January">January Name</label>
<label class="February" for="February">February Name</label>
<label class="March" for="March">March Name</label>
<label class="April" for="April">April Name</label>
<label class="May" for="May">May Name</label>
<label class="June" for="June">June Name</label>
<label class="July" for="July">July Name</label>
<label class="August" for="August">August Name</label>
<label class="September" for="September">September Name</label>
<label class="October" for="October">October Name</label>
<label class="November" for="November">November Name</label>
<label class="December" for="December">December Name</label>
<select id="color">
<option value="">- favorite color -</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
</select>
<label class="Green" for="Green">Green Name</label>
<label class="Blue" for="Blue">Blue Name</label>
<label class="Red" for="Red">Red Name</label>
</form>
<!-- <p class="output">YOUR ANIMAL NAME IS JANUARY NAME GREEN NAME</p> -->
</body>
BTW - I also want to style the select fields... so does it make more sense to write these as a list items (li, ul)?