Find Selected Item in Datalist in HTML

How do I get the value of the selected item in a datalist using pure JS?

datalist elements don't have a selectedIndex property.

As far as I can tell, you get the value from the input and then find the option with that value, like this:

function showEditing(input) {    // Get the value from the input    var value = input.value;    // Get the matching `option` element from the `datalist` (which is    // available via `input.list`)    var option = Array.prototype.find.call(input.list.options, function(option) {        return option.value === value;    });    // Get its `data-id` attribute value    console.log(option.getAttribute("data-id"));}

<input data-row-id="1" id="assignee[1]" name="assignment[1][assignee]" class="assignee" list="transcribers" autocomplete="off" value="" onchange="showEditing(this);" data-id-proofinglevel="1" data-transcriber-id="1361"><datalist id="transcribers">    <option value="" data-id="0" data-id-proofinglevel=""></option>    <option value="Amy" data-id="674" data-id-proofinglevel="1"></option>    <option value="Jack" data-id="113" data-id-proofinglevel="2"></option></datalist>

Get selected value of datalist option value using javascript

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.

get selected value from datalist on change

You just need to get the value directly from #medProcDataList. You don't have to worry about finding the <option>

$('#medProcDataList').change(function() {

  var $selectedValue = $(this).val();

  console.log($selectedValue); //returns "216: Cardiac valve"
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<form method="post" action="">
  <label for="medProcDataList" class="form-label">Medical Procedures with hospital codes</label>
  <input class="form-control" list="datalistOptions" id="medProcDataList" placeholder="Type to search...">
  <datalist id="datalistOptions">
    <!-- this is populated with 70 options that look like this
      <option value='216: Cardiac valve'>-->
      <option value='216: Cardiac valve'>
  </datalist>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Cannot get selected value of datalist

The selection takes place in the input element, not the datalist. You need to give the input an ID

<input list="slots" name="slot" id="slotsInput"></input>

and query the value there:

console.log($('#slotsInput').val(), "slotID")

See also here: Get selected value in datalist using jQuery

---

Related Topics