根据2个下拉选项显示特定文本输出

我想显示两个文本字符串，具体取决于用户从两个下拉列表中的选择。

所以有两个下拉选项：

对于每个月的选项，我想要一个相应的值。 因此，对于1月选项，该值将为“1月名称”。 对于每种颜色选项，还有相应的值。 因此对于绿色选项，值为“绿色名称”。

一旦用户选择了两个选项（月份和颜色），我希望输出显示具有两个值的串联的文本。

例如，如果我选择January和Green，输出将为：

如果我将月份更改为其他内容，则名称将相应更新。

我把一些html / css代码放在一起作为开始http://jsfiddle.net/baumdexterous/ys3GS/ 。 如果有人能够了解如何使用jquery完成这项任务，我将不胜感激！ 另外 – 如何使文本输出淡入？ 非常感谢！！！

 
Find your Animal Name
 
Select your birth month and your favorite color and find your animal name.
 
  - birth month - January February March April May June July August September October November December  January Name February Name March Name April Name May Name June Name July Name August Name September Name October Name November Name December Name  - favorite color - Green Blue Red  Green Name Blue Name Red Name 
 <!-- 
YOUR ANIMAL NAME IS JANUARY NAME GREEN NAME
 -->  

BTW – 我也想设置选择字段的样式…所以将这些作为列表项（li，ul）更有意义吗？

Answer 1

 $("#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(); }); 

小提琴