HTML seçme/seçenek açılır listesinde bazı ek bilgiler taşımak

Question

Bir HTML seçme/seçenek açılır listesinde bazı gizli bilgiler (ör: posta kodu) taşımak ve kullanıcı değişiklikleri olduğunda javascript işlevini kullanılabilir hale getirmek istiyorum seçenek kutusu seçimi.

Bu, yapmak istediğim türden bir şeydir (ancak çalışmaz).

<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 data- * özniteliklerini sağlar, kendi özniteliklerinizi yalnızca veri ile önek tanımlayabilirsiniz. Veri-bilgi, veri-zip ya da her neyse.

Answer 2

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

Answer 3

kolay bir paralel dizi ve seçimin değeri göz önüne alındığında, bu size istediğiniz ek bilgi değerini ortaya çıkarmak için dizideki değer bulacaksınız sahip olacaktır.

Diğer bir seçenek,

Answer 4

class ve id bilgi depolama bu tür kullanmak iyi özelliklerdir projenin türüne uygun bir overkill değilse değer verilen bilgi aramak için bir web hizmeti aramak. Akılda tutulması gereken bir şey de, W3C standartlarına göre id'un bir sayı ile başlayamamasıdır, bu yüzden fazladan bilgi olarak numaralarınızı kaydetmeyi umuyor olsaydınız ya class'u kullanmanız ya da sayıyı çeken fazladan bir Javascript uygulamanız gerekir. substr işlevi gibi id'dan.

Answer 5

Bu fonksiyonu kullanarak, niteliğin değerini almak için JQuery kullanırsınız: Böyle

attr(attributeName) 

şey:

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

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

     }) 
     .trigger('change'); 

ve aynı işleve sahip öznitelik değerini ayarlayabilirsiniz:

attr(attributeName, value) 

check the API

Answer 6

Kullanıcılarınız eski tarayıcıları kullandığı için, bir boru veya karakterle ayrılmış bir dizge çalışabilir. Mesela

... Standart JavaScript ile

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

...

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