一個的多個值<option>

Question

我正在努力獲得更好的js知識，並且遇到了一些問題。 我想給出一個多個選項的選項，從我能找到的其他地方，帶分割的數組是最好的解決方案。 但我無法讓它發揮作用。 腳本的一面應該根據選定的destionation計算價格，而另一面是destinaton上的名稱。

<form name="ORDER" method="post" >
<select name="destination" id="destination_trV">
<OPTION VALUE="10,Cannes"> Cannes</option>
</form>

我希望一部分抓住“10”來使用這個計算目的，另一部分抓住“戛納”來寫。

var dest_1 = (document.getElementById("destination_trV").value);
var vari_1 = dest_1.split(",",1);
var vari_2 = dest_1.split(",",1,2);

這應該寫出“10”

document.getElementById("linje5").innerHTML="Priceclass: " + vari_1 + "<br>";

這應該寫出“戛納”

document.getElementById("linje6").innerHTML="Destination: " + vari_2 + "<br>";

但這不起作用:)

Answer 1

拆分不能像MDN拆分那樣工作

string.split([separator][, limit])

只做一次拆分

var vals = dest_1.split(",");
var vari_1 = vals[0];
var vari_2 = vals[1];

更好的方法是使用數據屬性。

Answer 2

如果其中一個值包含一個字符,會發生什么？ 您需要某種形式的編碼來保留原始數據。 您最好將這些值拆分為單獨的[data-*]屬性 ，而不是嘗試將多個值綁定到單個屬性中 ：

...
<option value="Cannes" data-destination="Cannes" data-price-class="10">Cannes</option>
...

這樣，當您需要值時，可以選擇元素並單獨獲取屬性值：

(function () {
    var opt,
        destination,
        priceClass;
    opt = document.getElementById("destination_trV");
    destination = opt.getAttribute('data-destination');
    priceClass = opt.getAttribute('data-price-class');
    document.getElementById('linje5').innerHTML = 'Priceclass: ' + priceClass + '<br>';
    document.getElementById('linje6').innerHTML = 'Destination: ' + destination + '<br>';
}());