Geek Answers Handbook

Get selected value in datalist using jQuery

Very simple and straightforward. I pre-populated the HTML datalist with the values ​​in the form when I want to select a value and paste it into the SQLite database. This is my sample code that does not work. Please, help. Creating an HTML5 datalist form:

<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 an example jquery code that didn't work:

 var relationshipTemp = $('#TypeList option:selected').text();
+8
source share
9 answers

Select the selector to select an input item. Mention the event after which you want the values ​​to be moved. Get the value using .val ().

Example:

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

Hope this is what you are looking for jsFiddle

+18
source

:selected does not work with datalist parameters, since a single data source can provide offers for several inputs. If two different inputs contain two different sentences from the list, which will be selected?

As mentioned in other comments, you can check the input value when changing as follows:

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

However, if you want to make sure that this value is actually one of the parameters from the datalist, you will need to do an additional check, as visitors to the datalist can still enter different values ​​in the input. Datalist just offers suggestions.

Solution for checking if a value is in the data directory:

 $("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 } });
+5
source

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

Try it.

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

try instead of .val ():

 var relationshipTemp = $('#TypeList option:selected').val();
+1
source 
 <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>
0
source

You simply give your input an identifier and then use the input val () as follows:

HTML:

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

JS:

 $('#typeInput').val();
0
source

The easiest way is to get the name of the data list using its name attribute, and then use the val() function to see the selected value.

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

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

0
source

a simple solution to this problem is to do it when you get the value from the 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>
-2
source

More articles:


All Articles