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

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

回答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
    }
});

回答3:

Try this.

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

回答4:

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

回答5:

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/

回答6:

try .val() instead :

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

回答7:

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

回答8:

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

回答9:

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