Lleve algo de información extra en una lista desplegable Seleccionar/Seleccionar HTML

Question

Quiero llevar información extra oculta (por ejemplo: código postal) en una lista desplegable Seleccionar/Opción HTML y ponerla a disposición de una función javascript cuando el usuario selección del cuadro de opción.

Este es el tipo de cosas que me gustaría hacer (pero no funciona).

<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 proporciona datos * atributos, usted puede definir sus propios atributos simplemente prefijarlos con datos-. Como data-info, data-zip o lo que sea.

Answer 2

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

Answer 3

La forma más fácil será tener una disposición paralela y dado el valor de la selección, se encontrará el valor de la matriz para revelar información de valor adicional que desee.

Otra opción es llamar a un servicio web para buscar la información dado el valor si no es una exageración para el tipo de proyecto

Answer 4

class y id son buenos atributos a utilizar para este tipo de almacenamiento de información. Sin embargo, una cosa a tener en cuenta es que, según los estándares W3C, id no puede comenzar con un número, por lo tanto, si esperaba almacenar números como información adicional, deberá usar class o implementar Javascript adicional que extraiga el número desde id, como una función substr.

Answer 5

me gustaría utilizar jQuery para obtener el valor del atributo, usando esta función:

attr(attributeName) 

algo como esto:

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

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

     }) 
     .trigger('change'); 

y se puede establecer el valor del atributo con la misma función:

attr(attributeName, value) 

check the API

Answer 6

Dado que los usuarios usan navegadores antiguos, una cadena o cadena delimitada por caracteres puede funcionar.

Tales como ...

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

Con el estándar de 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; 
    }