无法获取数据集数值

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

您应该使用 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 2

查看您的代码，它似乎具有三个静态选项，因此考虑到以下代码将起作用。

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 3

首先，我将使用 querySelectorAll() to get all options of the target select. Then, I will use Array::map() 将所有选项映射到他的 data-* 属性。注意我必须从 value 属性中获取 data-* 属性名称的第二部分，因为 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>

无法获取数据集数值

Unable to fectch dataset numerical value

html

javascript

arrays

webpage