javascriptと<option>

Question

私は次のJavaScriptを持っています。

<form> 
<select id="sel"> 
    <option value="1">item_1</option> 
    <option value="2">item_2</option> 
    <option value="3">item_3</option> 
</select> 
<div id="show"></div> 

</form> 

<script type="text/javascript"> 
var sel = document.getElementById('sel'); 
sel.onchange = function() { 
    var show = document.getElementById('show'); 
    show.innerHTML = this.value; 
}; 
</script> 

私がonchangeをクリックすると、新しい値（ここでは1,2、または3）がdivの "show"に表示されます。これはうまくいきます。しかし、私の問題は、別の値を表示したいが、値（1,2、または3）を提出する必要があるということです。アイテムはキログラム、ポンドなどの単位、メートル、㎡、....

私はそのような何かをしたいがあります。

<option value="1" value2="kg">item_1</option> 

を私は<script>にvalue2にvalueを変えたが、それは助けにはなりませんでした。

show.innerHTML = this.value2; 

どのように動作させることができますか？

おそらくあるべき

Answer 1

あなたは@Simonが言ったことを適用する場合は、次のことを試すことができます。

sel.onchange = function() { 
    var show = document.getElementById('show'); 
    show.innerHTML = this.options[this.selectedIndex].getAttribute('value2'); 
} 

Answer 2

：

show.innerHTML = this.options[this.selectedIndex].value; 

Answer 3

リストを構築する「他の場合」または「スイッチ」は、人口の値とディスプレイ上で構築し、あなたが使用していない理由を動的に生成された1、ない場合には君が好きなものならなんでも？

Answer 4

valueには、コンピュータによってフォームの一部として解釈される文字列が含まれているため、サーバーに送信する値にはvalue属性を使用します。

異なる属性を使用して、人間が読み取り可能なテキストを<option>に関連付けます。 titleとlongdescが適しています。

Answer 5

可能であれば、jQueryの使用をお勧めします。 html5準拠のブラウザを使用できると思われる場合は、<option>要素のデータ属性を使用できます。このようにして、有用であると判明した属性を保存することができます。

jQuery data attributes usage

Answer 6

あなたは、ドロップダウンからテキストを表示したい場合は、代わりに.VALUEの.innerHTMLを使用することができます。まったく違うものを表示したい場合は、ルックアップテーブルなどが必要です.jQueryを使う方が簡単かもしれません。

Answer 7

改訂HTML：

<form> 
    <select id="sel"> 
     <option value="1" data-unit="kg">item_1</option> 
     <option value="2" data-unit="kph">item_2</option> 
     <option value="3" data-unit="m2">item_3</option> 
    </select> 
</form> 

<div id="show"></div> 

改訂HTMLは、カスタムを使用し、HTML5 で有効、data-*単位を格納する属性。私もをformの外に移動しましたが、それは完全に個人的な傾向であり、あなたが維持する必要はない（明らかに...）。

var sel = document.getElementById('sel'); 
sel.onchange = function() { 
    var show = document.getElementById('show'); 
    show.innerHTML = this.value + this.options[this.selectedIndex].getAttribute('data-unit'); 
}; 

JS Fiddle demo：

はJavaScriptを改正します。

JavaScriptがselectedIndexとthisノード内のオプションを探し、次にdata-unit属性内に含まれる文字列を検索するgetAttribute()を使用し、連結this.value文字列への。