javascript - How to add an attribute to each option of dropdown list - Stack Overflow

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

Share Improve this question Follow edited Apr 6, 2015 at 7:43 Sahil Sharma 2,0172828 silver badges3434 bronze badges asked Apr 6, 2015 at 7:02 SerginoSergino 10.9k3737 gold badges107107 silver badges181181 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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
})