Get selected value of datalist option value using javascript

Question

I need to add some values from a HTML5 DataList to a <select multiple> control just with Javascript. But I can't guess how to do it.

This is what I have tried:

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

}

blessanm86 · Accepted Answer · 2019-10-23 11:41:55Z

7

This should work. I have moved the value selection logic into the method itself. You will only get the value from the input. You will need to use the value to select the label from the datalist.

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.

answered Oct 23, 2019 at 11:41

blessanm86

31.8k14 gold badges74 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamun · Accepted Answer · 2019-10-23 12:23:05Z

You can check the trimmed value of the input. If value is not empty then you can get the selected data list option by matching the value attribute with querySelector().

Try the following way:

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>

Rohit Kapoor · Accepted Answer · 2021-05-11 20:04:25Z

-1

To get the selected options's ID in datalist, you can use this code too.

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

answered May 11, 2021 at 20:04

Rohit Kapoor

11 bronze badge

Collectives™ on Stack Overflow

Get selected value of datalist option value using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related