使用 javascript 获取数据列表选项值的选定值

Question

我需要使用 Javascript 将 HTML5 DataList 中的一些值添加到 <select multiple> 控件中。但是我猜不到怎么做。

这是我试过的：

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

}

Answer 1

这应该有效。我已将值 selection 逻辑移至方法本身。您只会从输入中获取值。您需要将值用于 select 来自数据列表的标签。

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

Here is the working demo.

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>

Answer 3

要获取所选选项在数据列表中的 ID，您也可以使用此代码。

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

<script>
$("#SelectColor").change(function(){
  var el=$("#SelectColor")[0];  //used [0] is to get HTML DOM not jquery Object
  var dl=$("#AllColors")[0];
  if(el.value.trim() != ''){
  var opSelected = dl.querySelector(`[value="${el.value}"]`);
  alert(opSelected.getAttribute('id'));
 }
});
</script>

使用 javascript 获取数据列表选项值的选定值

Get selected value of datalist option value using javascript

html

javascript

html-datalist