Получить выбранное значение параметра списка данных, используя JavaScript - PullRequest
Новая
       32

Получить выбранное значение параметра списка данных, используя JavaScript

0 голосов
/ 23 октября 2019

Мне нужно добавить некоторые значения из HTML5 DataList в <select multiple> элемент управления только с помощью Javascript. Но я не могу догадаться, как это сделать.

Вот что я пробовал: 

<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
  <option label="Red" value="1">
  <option label="Yellow" value="2">
  <option label="Green" value="3">
  <option label="Blue" value="4">
</datalist>

<button type="button" onclick="AddValue(document.getElementById('AllColors').value, document.getElementById('AllColors').text);">Add</button>
<select id="Colors" size="3" multiple></select>

function AddValue(Value, Text){

//Value and Text are empty!

var option=document.createElement("option");
option.value=Value;
option.text=Text;

document.getElementById('Colors').appendChild(option);

}

Ответы [ 2 ]

2 голосов
/ 23 октября 2019

Это должно работать. Я переместил логику выбора значения в сам метод. Вы получите значение только от ввода. Вам нужно будет использовать значение, чтобы выбрать метку из списка данных. 

function AddValue(){
  const Value = document.querySelector('#SelectColor').value;

  if(!Value) return;

  const Text = document.querySelector('option[value="' + Value + '"]').label;

  const option=document.createElement("option");
  option.value=Value;
  option.text=Text;

  document.getElementById('Colors').appendChild(option);
}

Вот рабочая демонстрация.

1 голос
/ 23 октября 2019

Вы можете проверить усеченное значение входа. Если значение не пустое, то вы можете получить выбранную опцию списка данных, сопоставив атрибут значения с querySelector().

Попробуйте следующим образом: 

function AddValue(el, dl){
  if(el.value.trim() != ''){
    var opSelected = dl.querySelector(`[value="${el.value}"]`);
    var option = document.createElement("option");
    option.value = opSelected.value;
    option.text = opSelected.getAttribute('label');
    document.getElementById('Colors').appendChild(option);
  }
}
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
  <option label="Red" value="1"></option>
  <option label="Yellow" value="2"></option>
  <option label="Green" value="3"></option>
  <option label="Blue" value="4"></option>
</datalist>

<button type="button" onclick="AddValue(document.getElementById('SelectColor'), document.getElementById('AllColors'));">Add</button>
<select id="Colors" size="3" multiple></select>
...