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

Question

Мне нужно добавить некоторые значения из 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);

}

javascript html html-datalist

2

Alberto Muñoz Sánchez 23 Окт 2019 в 14:12

Answer 1

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

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

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

2

blessenm 23 Окт 2019 в 11:41

Answer 2

Вы можете проверить усеченное значение входа. Если значение не пустое, вы можете получить выбранную опцию списка данных, сопоставив атрибут значения с 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>

1

Mamun 23 Окт 2019 в 12:23

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

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript