[Solved] Get selected value in datalist using jQuery

Very simple and straight forward. I pre-populated a HTML datalist with values, on the form when I want select a value and insert it into SQLite database. This is my example code which is not working. Please help out.
HTML5 datalist form creation:

<input  name="TypeList" list="TypeList" placeholder="Select Type"/>
<datalist id="TypeList">
    <option value="State">
    <option value="Area">
    <option value="Town">
    <option value="Street">
    <option value="Number">
    <option value="Local Government">
    <option value="Ward">
    <option value="Country">
</datalist>

this is the sample jquery code that did not work:

var relationshipTemp = $('#TypeList option:selected').text();
Enquirer: ken4ward

||

Solution #1:

Have a selector to select the input element. Mention the event after which you want the values to be moved. Get the value by using .val().

Example:

$("input[name=TypeList]").focusout(function(){
    alert($(this).val());
});

Hope this is what you are looking for jsFiddle

Respondent: Pazza22

Solution #2:

:selected does not work on datalist options, as one datalist can provide suggestions for multiple inputs. If two different inputs contain two different suggestions from the list, which would be the selected one?

As mentioned in other comments, you can check the value of the input on change like so:

$("input[name="Typelist"]").on('input', function(e){
    var selected = $(this).val();
});

However, if you want to make sure that the value is actually one of the options from the datalist you’ll have to do an extra check, as with a datalist visitors can still input different values in the input. Datalist merely offers suggestions.

A solution to check if the value is in the datalist:

$("input[name="Typelist"]").on('input', function(e){
   var $input = $(this),
       val = $input.val();
       list = $input.attr('list'),
       match = $('#'+list + ' option').filter(function() {
           return ($(this).val() === val);
       });

    if(match.length > 0) {
        // value is in list
    } else {
        // value is not in list
    }
});
Respondent: Stephan Muller

Solution #3:

The easy way is to get the name of datalist using it’s name attribute and then use val() function to see the value selected

$('[name="TypeList"]').val();

Check the working example https://jsfiddle.net/ch9uwvod/8/

Respondent: Vijai Sebastian

Solution #4:

Try this.

$('#id_relative option[datalisted=datalisted]').val()
Respondent: Young

Solution #5:

I would use ‘.on()’:

HTML

<input type="text" name="display" id="display" value="" list="list-display" />
<datalist id="list-display">
 <option>Name</option>
 <option>Id</option>
</datalist>

Javascript

$("#display").on('input',function(e){
 alert($(this).val());
});
Respondent: Christian

Solution #6:

try .val() instead :

var relationshipTemp = $('#TypeList option:selected').val();
Respondent: presidentnickson

Solution #7:

You simply give your input an ID and then use the input’s val() like so:

HTML:

<input id="typeInput" name="TypeList" list="TypeList" placeholder="Select Type"/>

JS:

$('#typeInput').val();
Respondent: cslotty

Solution #8:

<input list="Model" id="ModelList" placeholder="Select Model"> 
<datalist id="Model">
<option value="A">
<option value="B">
<option value="C">
<option value="D">
</datalist>
<script>
var dataset= document.getElementById("ModelList").value;
alert(dataset);</script>

Solution #9:

var relationshipTemp = null;
$('input[name=TypeList]').change(function(){
    // YOU CAN PERFORM LOGIC HERE OR CAN SAVE THE VALUE IN ANY VARIABLE
    relationshipTemp = $(this).val();    
});
Respondent: Xaad Razi

Solution #10:

simple solution to this problem is do it as you get the value from an text input field

Name:

<input id="l" list="bloodgroup" name="blood_group" placeholder="Blood group">
                    <datalist id="bloodgroup">
                        <option value="A+"> 
                        <option value="B+"> 
                        <option value="AB+"> 
                        <option value="O+"> 
                        <option value="A-"> 
                        <option value="B-"> 
                        <option value="AB-"> 
                        <option value="O-">
                    </datalist>

<button type="button" onclick="myFunction()">Try it</button>



<script>
function myFunction() {
    console.log(document.getElementById("l").value);
}
</script>

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.