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

我试图创建一个下拉列表，显示定制网站的谷歌字体。我试图根据选项值对每个选项应用一个类。我不能只是硬编码，因为我与一家托管供应商合作，所以我只有jquery/javascript功能，否则我只需要手动添加class标记。这是我的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>

对于我的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>

小提琴：

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

更新：哦，类名不能以数字开头。让我们制作它们。f1167。f1168等等。我们是否可以让jquery在选项值前面添加一个f以使其成为类名？

尝试以下操作：

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

});

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

试试这个：

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

});

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

---

你的小提琴有许多错误。未包括jQuery引用

使用。每个

---

你的小提琴有许多错误。未包括jQuery引用

使用。每个

---

请参阅已编辑的代码。我正在使用jQuery

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

---

请参阅已编辑的代码。我正在使用jQuery

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

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

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

谢谢

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

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

谢谢

试试这个：

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

});

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

试试这个：

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

});

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

---

在脚本中尝试以下操作：

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

---

在脚本中尝试以下操作：

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

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

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

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

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

---

如果您可以签入浏览器的firebug/inspect工具，则显示未定义的元素。如果您可以签入浏览器的firebug/inspect工具，则显示未定义的元素。非常漂亮。这就是我在问题中所问的，将类添加到选项中。现在，您知道为什么下拉列表仍然没有以类指定的字体显示选项吗？@KateTheGreat我不确定您是否可以像这样单独指定元素的字体……这样的内容有用吗？-@KateTheGreat是的，似乎在下拉列表中设置选项的字体是不可能的，基于太棒了，我太感谢你了。我想您不知道如何将示例div中的文本更新为输入文本框中输入的文本？像这样，有人可以从下拉列表中选择字体，然后在文本框中输入文本，以查看所选字体中的文本？您可以创建div，用户可以在那里编辑它。否则，您可以从输入元素开始，然后从。后者需要更多的工作，可能没有用户体验那么好，但contenteditable只适用于兼容HTML5的浏览器。这就是我在问题中所问的，将类添加到选项中。现在，您知道为什么下拉列表仍然没有以类指定的字体显示选项吗？@KateTheGreat我不确定您是否可以像这样单独指定元素的字体……这样的内容有用吗？-@KateTheGreat是的，似乎在下拉列表中设置选项的字体是不可能的，基于太棒了，我太感谢你了。我想您不知道如何将示例div中的文本更新为输入文本框中输入的文本？像这样，有人可以从下拉列表中选择字体，然后在文本框中输入文本，以查看所选字体中的文本？您可以创建div，用户可以在那里编辑它。否则，您可以从输入元素开始，然后从。后者需要更多的工作，可能没有用户体验那么好，但contenteditable只在兼容HTML5的浏览器中工作。