Question

我有下拉列表：

<select>
    <option value=""></option>
    <option value="Bla">Bla</option>
    <option value="Foo">Foo</option>
</select>

使用jQuery我想通过添加自定义属性level枚举每个选项来修改我的列表，所以我的选择看起来像这样，需要跳过列表的第一个选项：

<select>
    <option value=""></option> //skipping the first one
    <option value="Bla" level="1">Bla</option>
    <option value="Foo" level="2">Foo</option>
</select>

我怎么能用jQuery做到这一点？

Answer 1

您可以使用$('select option:gt(0)')

遍历索引1到n的所有选项

$('select option:gt(0)').attr('level',function(i){
   return i+1;
});

<强> Working Demo

或

$('select option:gt(0)').each(function(i){ $(this).attr('level',i+1) });

<强> Working Demo

Answer 2

$('select').children('option').each(function(index, element) {
  if (index) $(element).attr('level', index);
});

Answer 3

您可以使用.attr()

$('select option:not(:first-child)').attr('level', function (i) {
    return i + 1
})

Answer 4

最好使用data-*提供的html5属性：

$('select option').filter(':not(:first)').attr('data-level', function(i) {
  return $(this).index();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select>
  <option value=""></option> <!--this has index = 0-->
  <option value="Bla">Bla</option><!--this has index = 1-->
  <option value="Foo">Foo</option><!--this has index = 2-->
</select>

正如你在js代码中看到的那样，使用jQuery的attr()方法，你可以注意到它接受了一个回调函数，如果需要，可以通过一些操作返回属性值。
在这种特定情况下，我们使用给定.index()中可用的option select，并且在回调中需要使用return语句来应用该属性。

Answer 5

试试这个

$('select option').each(function(index,item){
   if(index>0)
   {
      $(item).attr('level',index);
   }
})

Demo

如何为下拉列表的每个选项添加属性

5 个答案: