使用jQuery在datalist中获取选定的值

Question

非常简单直接。当我想要选择一个值并将其插入SQLite数据库时，我在表单上预先填充了一个带有值的HTML数据表。这是我的示例代码无效。请帮忙。 HTML5 datalist表单创建：

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

这是不起作用的示例jquery代码：

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

Answer 1

有一个选择器来选择输入元素。提及您希望移动值的事件。使用.val（）获取值。

例：

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

希望这是你正在寻找的jsFiddle

Answer 2

:selected不适用于datalist选项，因为一位数据主义者可以为多个输入提供建议。如果两个不同的输入包含列表中的两个不同的建议，哪个是选定的？

如其他注释中所述，您可以像这样检查输入的值：

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

但是，如果要确保该值实际上是数据列表中的一个选项，则必须进行额外检查，与数据列表一样，访问者仍可在输入中输入不同的值。 Datalist仅提供建议。

检查值是否在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
    }
});

Answer 3

我会用'.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());
});

Answer 4

试试这个。

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

Answer 5

尝试.val（）代替：

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

Answer 6

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

Answer 7

您只需为输入提供一个ID，然后使用输入的val（），如下所示：

HTML：

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

JS：

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

Answer 8

简单的方法是使用它的name属性获取datalist的名称，然后使用val()函数查看所选的值

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

检查工作示例https://jsfiddle.net/ch9uwvod/8/

Answer 9

这个问题的简单解决方案就是从文本输入字段中获取值

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>