CODEWITHSUNDEEP
javascripthtmlhtml-select
robert
robert

Reputation: 625

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

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 it does not work).

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

Upvotes: 5

Views: 8676

Answers (6)

seasonedgeek
seasonedgeek

Reputation: 160

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

Upvotes: 2

mklfarha
mklfarha

Reputation: 993

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

Upvotes: 5

Mathias Schnell
Mathias Schnell

Reputation: 902

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.

Upvotes: -1

Fadrian Sudaman
Fadrian Sudaman

Reputation: 6465

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

Upvotes: 0

PleaseStand
PleaseStand

Reputation: 32122

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

Upvotes: 3

Maxem
Maxem

Reputation: 2684

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

Upvotes: 6

Related Questions