I have dropdown list:

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

Using jQuery I want to modify my list by enumerating each option by adding an custom attribute level so my select will look like that and need to skip the first option of the list:

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

How can I do that with jQuery?

I have dropdown list:

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

Using jQuery I want to modify my list by enumerating each option by adding an custom attribute level so my select will look like that and need to skip the first option of the list:

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

How can I do that with jQuery?

• javascript
• jquery

• So what you want to do with jQuery ? – Mox Shah Commented Apr 6, 2015 at 7:03

5 Answers 5

You can iterate over all the option with index 1 to n using $('select option:gt(0)'):

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

Working Demo

or

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

Working Demo

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

Try this

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

Demo

its better to use data-* attribute provided by html5:

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

<script src="https://ajax.googleapis./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>

As you can see in the js code there is the use of attr() method of jQuery, and you can notice that it accepts a callback function to return the attribute value with some operation if needed.
In this specific case we are using .index() of the option available in the given select and in the callback a return statement is necessary to apply the attribute.

You can use .attr()

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