How to Get the Selected Value of a Datalist Option Using JavaScript

Introduction:

Have you ever encountered the need to extract the selected value from a HTML5 Datalist and add it to a <select multiple> control using JavaScript? If so, you’re in the right place! In this article, we’ll explore the solution to this challenge step by step. By the end, you’ll have a clear understanding of how to accomplish this task effortlessly. Let’s dive in!

Understanding the Challenge

The Scenario

Imagine you have a Datalist with various color options, and you want to allow users to select colors from the list and add them dynamically to a <select multiple> control. However, you’re facing difficulties in extracting the selected value from the Datalist.

Exploring the Code

The HTML Markup

Let’s start by examining the HTML code you provided. It includes an input element with an id of “SelectColor” and a Datalist with an id of “AllColors”. The Datalist contains several color options, each with a label and a value attribute.

The JavaScript Function

In your code, you have defined a JavaScript function called AddValue. This function is triggered when the user clicks the “Add” button. It attempts to retrieve the selected value and text from the Datalist but is currently encountering issues.

Resolving the Issue

Understanding the Problem

The problem lies in the way you’re trying to access the selected value and text from the Datalist in your JavaScript code. Let’s modify the function to correctly retrieve these values.

Updated JavaScript Function

Replace your existing JavaScript function with the following code:

code

























function AddValue() {
  var selectedOption = document.getElementById('SelectColor').value;
  
  var datalistOptions = document.getElementById('AllColors').options;
  var selectedText = "";
  
  for (var i = 0; i < datalistOptions.length; i++) {
    if (datalistOptions[i] 
.value === selectedOption) {
      selectedText = datalistOptions[i] 









.label;
      break;
    }
  }
  
  var option = document.createElement("option");
  option.value = selectedOption;
  option.text = selectedText;

  document.getElementById('Colors').appendChild(option);
}

Explanation of the Updated Code

Retrieving the Selected Value and Text

In the updated code, we first retrieve the selected value from the input element with the id “SelectColor”. We store it in the variable selectedOption.

Next, we obtain a reference to the options within the Datalist using document.getElementById('AllColors').options. We iterate over these options and compare their values with the selected option. Once we find a match, we assign the corresponding label to the selectedText variable.

Finally, we create a new <option> element, set its value and text based on the selected option and text, and append it to the <select> element with the id “Colors”.

Verifying the Solution

Testing the Updated Code

Save the changes and test your application. Now, when you select a color from the Datalist and click the “Add” button, the selected color should be added to the <select multiple> control correctly.

Conclusion:

Learned how to extract the selected value from a Datalist option using JavaScript and add it to a <select multiple> control. By implementing the updated code, you can now enhance the interactivity of your web forms. Feel free to apply this knowledge to other similar scenarios where you need to