получить идентификатор выбранной опции объекта списка данных, используя data-value - PullRequest
Новая
       6

получить идентификатор выбранной опции объекта списка данных, используя data-value

0 голосов
/ 12 января 2019

Я хочу получить идентификатор (data-value) выбранной опции для объекта списка данных.

Я пытался получить идентификатор с помощью функции Javascript и использовать this.dataset.value, но я получаю результат undefined 

<datalist id="options">
  <option value="myoption one" data-value="1">
  <option value="myoption two" data-value="2">
  <option value="myoption three" data-value="3">
</datalist>

<input list="options" id="myoptions">
<button onclick="getIdOfDatalist('myoptions');">check</button>

function getIdOfDatalist(divid){
  console.log(document.getElementById(divid).dataset.value);
}

В чем моя ошибка? (Код просто сокращен, JS в голове <script>)

Ответы [ 3 ]

0 голосов
/ 12 января 2019

Если вы немного измените html, вы можете использовать метод, чтобы избежать зацикливания элементов самостоятельно. Например: 

<datalist id="options">
  <option value="myoption one" name="myoption one" data-value="1">
  <option value="myoption two" name="myoption two" data-value="2">
  <option value="myoption three" name="myoption three" data-value="3">
</datalist>

<input list="options" id="myoptions">
<button onclick="getIdOfDatalist('myoptions');">check</button>

<script>
function getIdOfDatalist(listid){
  var listObj = document.getElementById(listid);
  var datalist = document.getElementById(listObj.getAttribute("list"));
  console.log(datalist.options.namedItem(listObj.value));
}
</script>

Обратите внимание, что я добавил атрибут "имя" для каждого элемента в списке данных.

0 голосов
/ 12 января 2019

Вот простое решение с JQuery.

Поскольку JQuery имеет встроенный метод, называемый data(), легко получить data-value. В javascript вы можете использовать что-то под названием dataset.value, но с проблемами совместимости браузера, кроме этого вы можете использовать getAttribute (). 

$(document).ready(function() {
 $('button').click(function() {
    var value = $('input').val();
    alert($('#options [value="' + value + '"]').data('value'));
    });  
});

HTML 

<datalist id="options">
  <option value="myoption one" data-value="1">
  <option value="myoption two"  data-value="2">
  <option value="myoption three"  data-value="3">
</datalist>

<input list="options" id="myoptions">
<button>check</button>

Надеюсь, это поможет.

0 голосов
/ 12 января 2019

Возможно, у меня есть только одно решение: проверить ввод и список данных с помощью цикла for: 

function getIdOfDatalist(datalist_id,input_id){

    var datalist = document.getElementById(datalist_id);
    var input    = document.getElementById(input_id);

    for (var i=0;i<datalist.options.length;i++) {
        if (datalist.options[i].value == input.value) {
            // obtains the data-company attribute
            console.log(datalist.options[i].getAttribute("data-value"));
            break;
        }
    }
}

Но это, на мой взгляд, не лучшее решение или нет?

...