根据 2 个下拉选择显示特定的文本输出答案

【问题标题】：Showing specific text output based on 2 drop down selections根据 2 个下拉选择显示特定的文本输出
【发布时间】：2018-07-25 02:07:47
【问题描述】：

我想根据用户从两个下拉列表中的选择显示两个文本字符串。

所以有两个下拉选项：

对于每个月的选项，我希望有一个对应的值。因此，对于一月选项，该值将是“一月名称”。对于每个颜色选项，也有一个对应的值。所以对于绿色选项，值为“绿色名称”。

一旦用户选择了两个选项（月份和颜色），我希望输出显示一个包含两个值连接的文本。

例如，如果我选择一月和绿色，输出将是：

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

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

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

顺便说一句 - 我还想设置选择字段的样式...那么将它们写成列表项 (li, ul) 是否更有意义？

【问题讨论】：

你有什么问题？
如果你想设置表单域的样式，试试Uniformjs.com

标签： javascript jquery drop-down-menu

【解决方案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();
});

FIDDLE

【讨论】：

嘿-抱歉，我要发布的代码是这样的：jsfiddle.net/baumdexterous/ys3GS
非常感谢！这正是我试图解决的问题。非常感谢@Barmar！非常感谢您的帮助。
看起来很简单，你想不通的部分是什么？
等待出现错误 - 我的意思是让输出显示标签名称。所以：content = '你的动物名字是'+月份+'名字'+颜色+'名字'；是不正确的。我怎么能说：你的动物名字是（一月的标签值）（二月的标签值）。这有意义吗？
您的标签没有任何意义。标签中的for 属性应该与以下标签之一的id 属性匹配：按钮、输入、keygen、仪表、输出、进度、选择、文本区域。您不能为单个选项添加标签。