carry some extra information in an HTML select/option dropdown list

Question

I want to carry some extra hidden information (eg: postal code) in an HTML select/option dropdown list and make it available to a javascript function when user changes option box selection.

This is the type of thing I would like to do (but alas it does not work). Can someone fix it or suggest reasonable alternative?

    <select id="sel_activity" onchange="selectionChange(this.info)"> 
    <option info=""       value="CAR">CAR PROBLEM</option> 
    <option info=""       value="COFFEE">Coffee Break</option>
    <option info="45678"  value="INV">INVENTORY COUNT</option>
    <option info="23567"  value="INVDROP">Inventory</option>
    <option info="" value="LUNCH">Lunch Break</option> 
    <option info="87654"  value="MEET">Meeting</option>
    </select>

.
.
.
.
    function selectionChange(info){

       alert(info);

    }

Answer 1

HTML 5 provides data-* attributes, you can define your own attributes just prefix them with data-. Like data-info, data-zip or whatever.

Answer 2

onchange="selectionChange(this.options.item(this.selectedIndex).getAttribute('info'))"

Answer 3

The easiest will be to have a parallel array and given the value of the selection, it will find the value in the array to reveal additional info value that you want.

Another option is to call a web service to look up the info given the value if it is not an overkill for your type of project

Answer 4

class and id are good attributes to use for this kind of information storage. One thing to keep in mind though is that, by W3C standards, id cannot start with a number, so if you were hoping to store numbers as your extra info you'll either have to use class or implement some extra Javascript that pulls the number from the id, like a substr function.

Answer 5

I would use JQuery to get the attribute's value, using this function:

attr( attributeName )

something like this:

       $("select").change(function () {

          $("select option:selected").each(function () {
                var info = $(this).attr("info");
                alert(info);
              });

        })
        .trigger('change');

and you can set the attribute value with same function:

 attr( attributeName, value )

check the API

Answer 6

Since your users are using old browsers, a pipe or character delimited string may work.

Such as ...

<select id="sel_activity" onchange="selectionChange(this)">
  <option value="|CAR">CAR PROBLEM</option> 
  <option value="|COFFEE">Coffee Break</option>
  <option value="45678|INV">INVENTORY COUNT</option>
  <option value="23567|INVDROP">Inventory</option>
  <option value="|LUNCH">Lunch Break</option> 
  <option value="87654|MEET">Meeting</option>
</select>

With standard JavaScript ...

 function selectionChange(o) {
   // an alternative ...    
   var values = o.options[o.options.selectedIndex].value.split("|");            
   alert("Selected Index? "+(o.options.selectedIndex+1)
    +"\nInfo? "+values[0]
    +"\nValue? "+values[1]);
   values = null;
  }