Saturday, 15 August 2015

javascript - Showing specific text output based on 2 drop down selections -


I want to display two text strings based on the user's selection with two drop down lists.

Then there are two drop down options: Enter image details here < P> For each month's option, I want to keep a related value. So for the January option, the value will be "Jan's name". For each color option, there is a similar value too. For the green option, the value is "Green Name".

Once the user selects both options (months and colors), then I want to display the output with the completion of two values ​​to display the text.

For example, if I select January and green, the output will be:

 Enter image details here

If I change something else a month, then the name will be updated accordingly.

I have put some HTML / CSS code as a start. I highly appreciate if anyone has shed some light on how I can use this work jquery! Apart from this - how can I fade in text output? Thanks a lot! & lt; Body & gt; & Lt; H2 & gt; Find your animal's name & lt; / H2 & gt; & Lt; P & gt; Select your birth month and your favorite color and find your animal name. & Lt; / P & gt; & Lt; Form & gt; & Lt; Select ID = "month" & gt; & Lt; Option value = "" & gt; - Birth month - & lt; / Options & gt; & Lt; Option value = "Jan" & gt; January & lt; / Options & gt; & Lt; Option value = "February" & gt; February & lt; / Options & gt; & Lt; Option value = "march" & gt; March & lt; / Options & gt; & Lt; Option value = "April" & gt; April & lt; / Options & gt; & Lt; Option value = "may" & gt; May & lt; / Options & gt; & Lt; Option value = "June" & gt; June & lt; / Options & gt; & Lt; Option value = "July" & gt; July & lt; / Options & gt; & Lt; Option value = "August" & gt; August & lt; / Options & gt; & Lt; Option value = "September" & gt; September & lt; / Options & gt; & Lt; Option value = "Oct" & gt; October & lt; / Options & gt; & Lt; Option value = "November" & gt; November & lt; / Options & gt; & Lt; Option value = "December" & gt; December & lt; / Options & gt; & Lt; / Select & gt; & Lt; Label class = "jan" = "january" & gt; January name & lt; / Label & gt; & Lt; Label class = "February" = "February" & gt; February name & lt; / Label & gt; & Lt; Label class = "march" for "march" & gt; March name & lt; / Label & gt; & Lt; Label class = "April" for = "April" & gt; April name & lt; / Label & gt; & Lt; Label class = "May" for "May" & gt; May name & lt; / Label & gt; & Lt; Label class = "June" for "Jun" & gt; June's name & lt; / Label & gt; & Lt; Label class = "July" for = "July" & gt; July name & lt; / Label & gt; & Lt; Label class = "August" for "August" & gt; August name & lt; / Label & gt; & Lt; Label class = "September" for = "September" & gt; September name & lt; / Label & gt; & Lt; Label class = "october" = "october" & gt; Name of October & lt; / Label & gt; & Lt; Label class = "November" = "November" & gt; November name & lt; / Label & gt; & Lt; Label class = "December" = "December" & gt; December name & lt; / Label & gt; & Lt; Select ID = "Color" & gt; & Lt; Option value = "" & gt; - Favorite Colors - & lt; / Options & gt; & Lt; Option value = "green" & gt; Green & lt; / Options & gt; & Lt; Option value = "blue" & gt; Blue & lt; / Option & gt; & Lt; Option value = "red" & gt; Red & lt; / Options & gt; & Lt; / Select & gt; & Lt; Label class = "green" = "green" & gt; Green name & lt; / Label & gt; & Lt; Label class = "blue" = "blue" & gt; Blue name & lt; / Label & gt; & Lt; Label class = "red" for = "red" & gt; Red Name & lt; / Label & gt; & Lt; / Form & gt; & Lt ;! - & lt; P class = "output" & gt; Your animal name generator name is Green Name & lt; / P & gt; - & gt; & Lt; / Body & gt;

BTW - I also want to make selected field style ... so does it make more sense to write as LIST (LI, UL)?

  $ ("# months, #color"). Change (function () {var month = $ ("# month") = ("#color"). Val (); var content = ''; if (month & amp; color) {var monthlabel = $ ("label "Color" = "" ("label [for + color +"] "for [+ +" (+ + "+ color +"]. Text (); content = 'Your animal's name is + month's label + '+ + + Color label;} $ ("#output"). Text (content). FadeIn ();});   



No comments:

Post a Comment