javascript - 一个<option>的多个值

我试图获得更好的js知识，但遇到了一些问题。
我想提供一个以上的选项，从我能找到的其他地方来看，使用split数组是最好的解决方案。但是我无法正常工作。
脚本的一侧应根据所选目标来计算价格，而另一侧是目标上的名称。

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

但这不起作用:)

最佳答案

如果这些值之一包含,字符，将会发生什么？您需要某种形式的编码来保留原始数据。与其尝试将多个值塞入单个属性中，不如将这些值拆分为单独的[data-*] attributes：

...
<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>';
}());