Get selected value in datalist using jQuery

Question

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

Dkl

have you tried changing $('#TypeList option:selected').text(); to $('#TypeList option:selected').val();? – Grays

yes, I tried it, because i'm inputting into SQLite (WebSQL) instead of showing the real values it's showing "undefined". What's wrong? – Dkl

In firefox, <input value="Select Type"> seems to work. – Jeanne

Answer 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

Wolfhound

This selection of using [name=TypeList] is exactly what I was looking for, thanks. Just to note: you can also use other methods such as .change() to trigger a function. – Honniball

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

Semiramis

Perfect. Just change the 'input' event to 'select', to prevent event execution when the user manually types the whole dataset value in full. – Pinnate

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

Enchain

this should be the correct solution, when you want to get value or other data attributes for the selected option. instead of on change or focusout events. – Archeology

Answer 4

Try this.

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

Jareb

Answer 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());
});

Thebaine

Answer 6

try .val() instead :

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

Encomium

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

Osuna

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

Oke

Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made. – Penmanship

Answer 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();    
});

Contagium

Answer 10

You just give a id to datalist. And in script, you can get the value like velow:

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

Medicine

Answer 11

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>

Apure