Невозможно изменить числовое значение набора данных - PullRequest
Новая
       8

Невозможно изменить числовое значение набора данных

0 голосов
/ 14 февраля 2019 
<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 не имеют числовых значений.Что за исправление?

Ответы [ 3 ]

0 голосов
/ 14 февраля 2019

Глядя на ваш код, кажется, что он имеет три статических параметра, поэтому, учитывая, что приведенный ниже код будет работать. 

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)
}

Но если параметры являются динамическими, вам придется циклически проходить по ним.

0 голосов
/ 14 февраля 2019

Во-первых, я буду использовать 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>
0 голосов
/ 14 февраля 2019

Вы должны использовать 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"));
}
...