portare alcune informazioni extra in un elenco a discesa di selezione/opzione HTML

Question

Desidero portare alcune informazioni nascoste aggiuntive (ad esempio: codice postale) in un elenco a discesa di selezione/opzione HTML e renderlo disponibile a una funzione javascript quando modifiche utente selezione della casella di opzione.

Questo è il tipo di cosa che vorrei fare (ma non funziona).

<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 fornisce gli attributi data- *, è possibile definire i propri attributi semplicemente prefisso con dati-. Come data-info, data-zip o altro.

Answer 2

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

Answer 3

Il metodo più semplice sarà quello di avere un allineamento parallelo e dato il valore della selezione, sarà trovare il valore della matrice per rivelare il valore informazioni aggiuntive che si desidera.

Un'altra opzione è quella di chiamare un servizio web per cercare informazioni dato il valore se non è un peso inutile per il vostro tipo di progetto

Answer 4

class e id sono buoni attributi da utilizzare per questo tipo di memorizzazione delle informazioni. Una cosa da tenere a mente è che, con gli standard W3C, id non può iniziare con un numero, quindi se speri di memorizzare numeri come informazioni extra dovrai usare class o implementare qualche Javascript in più che estrae il numero da id, come una funzione substr.

Answer 5

userei JQuery per ottenere il valore dell'attributo, utilizza questa funzione:

attr(attributeName) 

qualcosa di simile:

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

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

     }) 
     .trigger('change'); 

ed è possibile impostare il valore di attributo con la stessa funzione:

attr(attributeName, value) 

check the API

Answer 6

Poiché gli utenti utilizzano i vecchi browser, una stringa delimitata da una pipe o un carattere potrebbe funzionare.

Come ...

<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 JavaScript standard ...

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