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 split

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

只做一次分裂

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

更好的方法是使用数据属性。

Answer 2

如果其中一个值包含,字符，会发生什么？您需要某种形式的编码来保留原始数据。您最好将这些值拆分为单独的[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>';
}());

一个<option> </option>的多个值

2 个答案: