如何遍历选择框中的选项答案

【问题标题】：How do I loop through options in the select box如何遍历选择框中的选项
【发布时间】：2011-05-02 20:52:06
【问题描述】：

我想遍历选择框中属性设置为的选项 “data-status = YES”并选择此选项并以红色应用所有这些选项。我该怎么做。这个“data-status”是通过php编写的

<select id ="test1">
<option  value = "1" data-status='YES'>one</option>
<option  value = "2" data-status='NO'>2</option>
<option  value = "3" data-status='YES'>3</option>
<option  value = "4" data-status='YES'>4</option>
</select>

$(document).ready(function(){
        $('#test1 > option:selected').each(function() {
           // alert($(this).text() + ' ' + $(this).val());
           if($(this).data-status==YES"){
                $(this).css()
           }
        });

    });

如何将 font-weight :bold 属性应用于具有 data-status =YES 的选项我使用 .addClass("bold")

添加了它

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

我相信这就是你要找的东西

$('#test1 option').each(function() {
   // alert($(this).text() + ' ' + $(this).val());
   if($(this).data('status') == 'YES'){
        $(this).css('color','red');
   }
});

演示 http://jsfiddle.net/gaby/6N88x/

如果您还想选择多个选项，则需要将multiple 属性添加到select 标记。

<select id ="test1" multiple>

并将脚本更改为

$('#test1 option').each(function() {
   // alert($(this).text() + ' ' + $(this).val());
   if($(this).data('status') == 'YES'){
        $(this)
            .css('color','red')
            .attr('selected',true);
   }
});

演示 http://jsfiddle.net/gaby/6N88x/1/

【讨论】：

如何增加选项的字体大小
@Derby，您不能根据每个选项更改字体大小。（只有 Firefox 允许这样做）。对于 Firefox，它是 .css('font-size','25px') jsfiddle.net/gaby/6N88x/2

【解决方案2】：

不需要循环，应该这样做。

   $("#test1 > option[data-status=YES]").css("color","red");

【讨论】：

【解决方案3】：

试试这个：

if($(this).data('status') == 'YES')

【讨论】：

我没有应用 Selected 属性。我该怎么做
@Derby，你应该删除它：$('#test1 > option')。

【解决方案4】：

我认为您不能设置 <option> 的颜色，但您可以像这样循环遍历 <select>：

$(document).ready(function(){
    $('#test1 > option').each(function() {
       if($(this).data('status')=="YES") {
           $(this).html('test'); // or whatever
       }
    });

});

【讨论】：

【解决方案5】：

将$(this).data-status 更改为$(this).attr('data-status')。

【讨论】：

【解决方案6】：

$('#test1 > option').filter(function() {
    return $(this).data("status") == "YES";
}).remove(); // or whatever

演示：http://jsfiddle.net/xxzLA/

http://api.jquery.com/filter

【讨论】：

我如何将字体样式粗体应用到具有数据状态 =“YES”的选项。我尝试使用 addClass 但它不起作用