添加类以根据值选择下拉列表答案

【问题标题】：add class to select dropdown based on value添加类以根据值选择下拉列表
【发布时间】：2014-09-19 05:29:45
【问题描述】：

我正在尝试创建一个下拉菜单，用于显示自定义网站的谷歌字体。我正在尝试根据选项值对每个选项应用一个类。我不能只是硬编码它，因为我正在与托管供应商合作，所以我只有 jquery/javascript 能力（否则我只需手动添加类标签）。这是我的 HTML：

<select name="SELECT___ENG_SVC___52">
<option value="1167">Lobster</option>
<option value="1168">Shadows Into Light</option>
<option value="1169">Pacifico</option>
</select>

CSS：

.1167 {
font-size: 25px;
font-family: 'Lobster';
}

.1168 {
font-size: 25px;
font-family: 'Shadows Into Light';
}

.1169 {
font-size: 25px;
font-family: 'Shadows Into Light';
}

对于我的 jquery/javascript，我有：

var fontname = element.options.val();
if(fontname == 1167) {
fontname.addclass(fontname.val);
}

我想要完成的事情：

<select name="SELECT___ENG_SVC___52">
<option value="1167" class="1167">Lobster</option>
<option value="1168" class="1168">Shadows Into Light</option>
<option value="1169" class="1169">Pacifico</option>
</select>

小提琴：http://jsfiddle.net/sNkDW/276/

任何帮助将不胜感激。提前致谢

更新：哎呀，不能有以数字开头的类名。所以让我们把它们变成 .f1167 .f1168 等等。我们可以让 jquery 在选项值前面添加一个“f”以使其成为类名吗？

【问题讨论】：

如果你可以检查浏览器的firebug/inspect工具。它显示元素未定义。

标签： javascript jquery html css

【解决方案1】：

jQuery addClass 方法有一个重载方法，它接受一个函数作为参数。您可以利用它一次为所有元素设置类：

$(function() {
    $('select[name="SELECT___ENG_SVC___52"] option').addClass(function() {
        return 'f' + $(this).val();
    });
});

【讨论】：

漂亮。这就是我在问题中提出的问题（将类添加到选项中）。现在，你知道为什么下拉菜单仍然没有以类指定的字体显示选项吗？
@KateTheGreat 我不确定您是否可以像这样单独指定<option> 元素的字体...这样的东西有用吗？ - jsFiddle Demo
@KateTheGreat 是的，基于this SO post，似乎无法在下拉菜单中设置选项的字体
太棒了，我感激不尽。我不认为您知道将#sample div 中的文本更新为输入到输入文本框中的文本的方法吗？就像有人可以从下拉列表中选择字体，然后在文本框中输入他们的文本以查看所选字体的文本？
你可以把 div 设为contenteditable，然后用户就可以在那里编辑它。否则，您可以从输入元素when it changes 开始get the value，然后是<div> 的update the text content。后者工作量更大，用户体验可能不那么好，但contenteditable 仅适用于 HTML5 兼容的浏览器。

【解决方案2】：

请查看编辑后的代码。我正在使用 jQuery。

$("#myselect").children("option").each(function(index) {
    $(this).addClass($(this).val());
});

http://jsfiddle.net/sNkDW/279/

【讨论】：

【解决方案3】：

试试这个：

$('option').each(function(){
   var option = $(this);
   var val = option.val();
   option.addClass(val);

});

【讨论】：

【解决方案4】：

试试这个：

var options=$("select option");
for(var i=0; i<options.length;i++){
   $(options[i]).addClass($(options[i]).val());
}

【讨论】：

【解决方案5】：

你的小提琴有很多错误。不包括 jQuery 参考。

使用.each()。

$('select option').each(function(){
  $(this).addClass(this.value);
});

Fiddle

【讨论】：

【解决方案6】：

既然你有jquery，你可以试试这个；

$( "select[name='SELECT___ENG_SVC___52'] option" ).each(function() {
    $(this).addClass(this.value);
});

http://jsfiddle.net/Rv39U/

谢谢！

【讨论】：

【解决方案7】：

在你的脚本中试试这个：

$(document).ready(function () {
    $("#drd option").each(function () {
        debugger;
        $(this)[0].className = $(this)[0].value;
    });
});

并将您的 HTML 更改为：

<select name="SELECT___ENG_SVC___52" id="drd">
    <option value="1167">Lobster</option>
    <option value="1168">Shadows Into Light</option>
    <option value="1169">Pacifico</option>
</select>

【讨论】：