Saya perlu menambahkan beberapa nilai dari HTML5 DataList ke kontrol <select multiple> hanya dengan Javascript. Tapi saya tidak bisa menebak bagaimana melakukannya.

Inilah yang saya coba:

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

}
1
Alberto Muñoz Sánchez 23 Oktober 2019, 14:12

2 jawaban

Jawaban Terbaik

Ini harus bekerja. Saya telah memindahkan logika pemilihan nilai ke dalam metode itu sendiri. Anda hanya akan mendapatkan nilai dari input. Anda perlu menggunakan nilai untuk memilih label dari daftar data.

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

Berikut adalah demo kerja.

3
blessenm 23 Oktober 2019, 11:41

Anda dapat memeriksa nilai input yang dipangkas. Jika nilai tidak kosong maka Anda bisa mendapatkan opsi daftar data yang dipilih dengan mencocokkan atribut nilai dengan querySelector().

Coba cara berikut:

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>
2
Mamun 23 Oktober 2019, 12:23