Question

我试图创建一个下拉列表，显示定制网站的谷歌字体。我试图根据选项值为每个选项应用一个类。我不能硬编码，因为我正在与托管供应商合作，所以我只有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/

非常感谢任何帮助。提前致谢

更新：oops，不能有以数字开头的类名。所以让它们.f1167 .f1168等等。我们可以让jquery添加＆＃34; f＆＃34;在选项值前面使它成为类名吗？

Answer 1

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

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

Answer 2

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

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

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

Answer 3

试试这个：

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

});

Answer 4

你的小提琴有很多错误。没有包含jQuery引用。

使用.each()。

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

<强> Fiddle

Answer 5

由于你有jquery，你可以试试这个;

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

http://jsfiddle.net/Rv39U/

谢谢！

Answer 6

试试这个：

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

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

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

7 个答案: