JavaScript get attribution from select

Question

Consider:

<select id="test">
   <option attribut="1">test 1</option>
   <option attribut="2">test 2</option>
   <option attribut="3">test 3</option>
   <option attribut="4">test 4</option>
   <option attribut="5">test 5</option>
</select>

I want to get the selected item's attribute. Is there any simple way to do it? The native JavaScript is fine.

Answer 1

There's no attribut attribute defined on the option tag. This is not standard HTML. A more standard way is to use the value attribute:

<select id="test">
   <option value="1">test 1</option>
   <option value="2">test 2</option>
   <option value="3">test 3</option>
   <option value="4">test 4</option>
   <option value="5">test 5</option>
</select>

which allows you to do this:

var value = document.getElementById('test').value;
alert(value); // shows the selected value

Answer 2

d = document.getElementById("test");
// This will get the first attribute of the first option
// Change the indices accordingly to get the others
myattr = d[0].attributes[0].value;

Of course, this is not standard HTML

Answer 3

I agree with @darin. The following code gives you the value of the option on changing event.

<script type="text/javascript"><!--
   function getValue(){
    val = document.getElementById("test").value;
    alert(""+val)       
   }
    </script>

<select id="test"  name="selectName" size="1" onChange="getValue();">
   <option value="1">test 1</option>
   <option value="2">test 2</option>
   <option  value="3">test 3</option>
   <option value="4">test 4</option>
   <option value="5">test 5</option>
</select>

Answer 4

You should rename 'attribut' to 'value' in your HTML. You can however define you own attributes and read them too (if validation is of no concern, and for HTML5 you can prefix your custom attribute with 'data-'). Looks like:

<select id="test">
   <option value="1" data-attrib="five">test 1</option>
   <option value="2" data-attrib="four">test 2</option>
   <option value="3" data-attrib="three">test 3</option>
   <option value="4" data-attrib="two">test 4</option>
   <option value="5" data-attrib="one">test 5</option>
</select>
​

Now for this select you can get the option values and 'attrib' values with something like:

function getOpts(){
  var mySelect = document.getElementById('test')
      , opts = mySelect.options
      , results = ''
      , i=0
      , len = opts.length;
  while (i<len){
        results += opts[i].getAttribute('data-attrib')+'-'+
                   (opts[i].selected 
                      ? 'selected value: '+opts[i].value 
                      : opts[i].value)+'\n';
        i++;
  }
  return '\n'+results;
}

​(If you also seek the text value of the option, you can append opts[i].firstChild.nodeValue to the results variable.)