Showing specific text output based on 2 drop down selections

Question

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: enter image description here

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:

enter image description here

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)?

what's your question?

Ryan
– Ryan

2013-03-26 18:44:46 +00:00
Commented Mar 26, 2013 at 18:44 — Ryan
– Ryan, Commented Mar 26, 2013 at 18:44
If you want to style the form fields, try Uniformjs.com

Barmar
– Barmar

2013-03-26 18:49:28 +00:00
Commented Mar 26, 2013 at 18:49 — Barmar
– Barmar, Commented Mar 26, 2013 at 18:49

Barmar · Accepted Answer · 2013-04-03 03:51:03Z

3

$("#month, #color").change(function () {
    var month = $("#month").val();
    var color = $("#color").val();
    var content = '';
    if (month && color) {
        var monthlabel = $("label[for="+month+"]").text();
        var colorlabel = $("label[for="+color+"]").text();
        content = 'Your animal name is ' + monthlabel + ' ' + colorlabel;
    }
    $("#output").text(content).fadeIn();
});

FIDDLE

edited Apr 3, 2013 at 3:51

answered Mar 26, 2013 at 18:47

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ori Over a year ago

Hey there - sorry, the code I meant to post is this: jsfiddle.net/baumdexterous/ys3GS

Ori Over a year ago

Thank you so much! That's exactly what I was trying to solve. THANK YOU SO MUCH @Barmar! Really appreciate your help.

Barmar Over a year ago

It seems so simple, what was the part you couldn't figure out?

Ori Over a year ago

Wait there is a mistake - I meant for the output to show the label name. So: content = 'Your animal name is ' + month + ' name ' + color + ' name'; Is not correct. How can I get it to say: Your animal name is (label value for January) (label value for February). Does that make sense?

Barmar Over a year ago

Your labels don't really make sense. The for attribute in a label is supposed to match the id attribute of one of the following tags: button, input, keygen, meter, output, progress, select, textarea. You can't have labels for individual options.

Collectives™ on Stack Overflow

Showing specific text output based on 2 drop down selections

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related