使用 javascript 獲取 datalist 選項值的選定值

Question

我需要將HTML5 DataList中的一些值添加到僅使用 Javascript 的<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

這應該有效。 我已將值選擇邏輯移至方法本身。 您只會從輸入中獲取值。 您將需要使用數據列表中 select 和 label 的值。

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

這是工作演示。

Answer 2

您可以檢查輸入的修剪值。 如果 value 不為空，那么您可以通過將 value 屬性與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

要在 datalist 中獲取所選選項的 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>