使用 jQuery 获取数据列表中的选定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22844373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get selected value in datalist using jQuery
提问by ken4ward
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:
非常简单直接。当我想要选择一个值并将其插入 SQLite 数据库时，我在表单上预先填充了一个带有值的 HTML 数据列表。这是我的示例代码，它不起作用。请帮忙。HTML5 数据列表表单创建：
<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:
这是不起作用的示例 jquery 代码：
var relationshipTemp = $('#TypeList option:selected').text();
回答by 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().
有一个选择器来选择输入元素。提及您希望在其后移动值的事件。使用 .val() 获取值。
Example:
例子：
$("input[name=TypeList]").focusout(function(){
alert($(this).val());
});
Hope this is what you are looking for jsFiddle
希望这就是你正在寻找的jsFiddle
回答by Stephan Muller
:selecteddoes not work on datalistoptions, 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?
:selected不适用于datalist选项，因为一个数据列表可以为多个输入提供建议。如果两个不同的输入包含来自列表的两个不同的建议，哪个是被选中的？
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.
但是，如果您想确保该值实际上是数据列表中的选项之一，您必须进行额外检查，因为使用数据列表访问者仍然可以在输入中输入不同的值。Datalist 仅提供建议。
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
}
});
回答by Young
Try this.
尝试这个。
$('#id_relative option[datalisted=datalisted]').val()
回答by Christian
I would use '.on()':
我会使用'.on()'：
HTML
HTML
<input type="text" name="display" id="display" value="" list="list-display" />
<datalist id="list-display">
<option>Name</option>
<option>Id</option>
</datalist>
Javascript
Javascript
$("#display").on('input',function(e){
alert($(this).val());
});
回答by Vijai Sebastian
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
简单的方法是使用 datalist 的 name 属性获取它的名称，然后使用val()function 查看选择的值
$('[name="TypeList"]').val();
Check the working example https://jsfiddle.net/ch9uwvod/8/
回答by nick
try .val() instead :
尝试 .val() 代替：
var relationshipTemp = $('#TypeList option:selected').val();
回答by HARSHVARDHAN RAJPUROHIT
<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>
回答by cslotty
You simply give your input an ID and then use the input's val() like so:
你只需给你的输入一个 ID，然后像这样使用输入的 val() ：
HTML:
HTML：
<input id="typeInput" name="TypeList" list="TypeList" placeholder="Select Type"/>
JS:
JS：
$('#typeInput').val();
回答by DINESH Kumar SISODIYA
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>
