CODEWITHSUNDEEP
javascripthtmlhtml-datalist
Alberto Muñoz Sánchez
Alberto Muñoz Sánchez

Reputation: 167

Get selected value of datalist option value using javascript

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

}

Upvotes: 6

Views: 32845

Answers (3)

Rohit Kapoor
Rohit Kapoor

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

Upvotes: -1

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 3

blessanm86
blessanm86

Reputation: 31789

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.

Upvotes: 7

Related Questions