如何显示选择选项的标签？答案

【问题标题】：How to display the label of a select option?如何显示选择选项的标签？
【发布时间】：2013-04-03 10:19:59
【问题描述】：

我编写了以下脚本：

它的工作方式是，您选择您的出生月份和最喜欢的颜色，然后它应该为您提供您的“名人姓名”。

现在脚本的编写方式是错误的......因为输出没有显示所选选项值的选项标签。如果此人选择一月作为月份并选择绿色作为颜色，我希望输出显示：您的名人姓名是 Linda Green。

如何改为显示所选标签选项的标签？非常感谢！！

HTML

<form>
    <select id="month">
        <option value="">- birth month -</option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
    </select>  
    <label class="January" for="January">Linda</label>
    <label class="February" for="February">Chris</label>
    <label class="March" for="March">James</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">Roberts</label>
    <label class="Blue" for="Blue">Blue</label>
    <label class="Red" for="Red">Unger</label>
</form>

    <p id="output"></p>

jQuery

$("#month, #color").change(function () {
    var month = $("#month").val();
    var color = $("#color").val();
    var content = '';
    if (month && color) {
        content = 'Your celebrity name is ' + month + ' name ' + color + ' name';
    }
    $("#output").text(content).fadeIn();
});

【问题讨论】：

我认为我以前从未见过这样使用的标签。
这应该是根据所选颜色在 DOM 中选择正确标签的问题。你有没有尝试过这样的事情？
使用数组而不是你拥有的奇怪的标签系统
谢谢...还没有弄清楚如何解决这个问题...非常感谢任何解决方案。

标签： jquery select

【解决方案1】：

您可以更改选项的值属性：

<select id="month">
        <option value="">- birth month -</option>
        <option value="Linda">January</option>
        <option value="Chris">February</option>
        <option value="James">March</option>
    </select>

颜色也是如此。

<select id="color">
        <option value="">- favorite color -</option>
        <option value="Roberts">Green</option>
        <option value="Blue">Blue</option>
        <option value="Unger">Red</option>
    </select>

然后删除标签，它应该可以按预期工作。

【讨论】：

【解决方案2】：

因为你有月份值的类名，你可以试试这个：

改变：

var month = $("#month").val();
var color =$("#color").val();

到：

var month = $('.'+$("#month").val()).text();
var color = $('.'+$("#color").val()).text();

【讨论】：