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

Pazza22

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

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

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

Young

Try this.

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

try .val() instead :

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

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

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

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/

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>

来源：https://stackoverflow.com/questions/22844373/get-selected-value-in-datalist-using-jquery

标签

jquery

html5

html-datalist