无法获取数据集数值

Question

<select class="license_type" name="license_type" id="license_type">
    <option value="l_one" data-one="500">License 1</option>
    <option value="l_two" data-two="700">License 2</option>
    <option value="l_three" data-three="1400">License 3</option>
</select>

这些500,700,1400稍后将通过PHP以编程方式提供。所以我的目标是通过数据集在JS中获取它们。

我写的JS函数是：

  function someFunction() {
    var vOne= document.getElementById("license_type");
    var vTow = vOne.options;
    var c1 = vTow.dataset.one;
    var c2 = vTow.dataset.two;
    var c3 = vTow.dataset.three;  
}

然后在另一个JS而不是像这样的硬编码价格：

  var prices = [500, 700, 1400];

和这个：

  var prices = ['c1', 'c2', 'c3'];

但这会产生NAN，这意味着c1，c2，c3没有数值。什么是修复？

Answer 1

看看你的代码似乎它有三个静态选项，所以考虑到下面的代码将起作用。

function someFunction() {
    var license_type= document.getElementById("license_type");
    var c1 = license_type.options[0].getAttribute('data-one');
    var c2 = license_type.options[1].getAttribute('data-two');
    var c3 = license_type.options[2].getAttribute('data-three');
    var prices = [c1, c2, c3];
    console.log(prices)
}

但是如果选项是动态的，那么你必须循环选项。

Answer 2

你应该使用getAttribute和parseInt。也循环选项，并像这样使用解构：

function someFunction() {
    var vOne = document.getElementById("license_type");
    var options = vOne.getElementsByTagName("option");
    var [c1, c2, c3] = options.map(e => e.getAttribute("data-one"));
}

Answer 3

首先，我将使用querySelectorAll()来获取目标选择的所有选项。然后，我将使用Array::map()将所有选项映射到他的data-*属性。注意我必须从data-*属性获取value属性名称的第二部分，因为data-*属性似乎与value属性相关（不是统一名称）：

var prices;

function someFunction()
{
    var opts = document.querySelectorAll("#license_type option");

    prices = Object.values(opts).map(o =>
    {
        let token = o.getAttribute("value").match(/l_(\w+)/)[1];
        return o.getAttribute("data-" + token);        
    });

    console.log(prices);
}

someFunction();

<select class="license_type" name="license_type" id="license_type">
    <option value="l_one" data-one="500">License 1</option>
    <option value="l_two" data-two="700">License 2</option>
    <option value="l_three" data-three="1400">License 3</option>
</select>