12

非常简单直接。当我想选择一个值并将其插入 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>

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

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

11 回答 11

20

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

于 2014-04-03T17:28:53.373 回答
11

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

如其他评论中所述，您可以像这样检查更改时输入的值：

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

但是，如果您想确保该值实际上是 datalist 中的选项之一，则必须进行额外检查，因为使用 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
    }
});
于 2015-04-23T08:57:56.583 回答
5

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

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

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

于 2019-06-28T13:23:44.873 回答
3

尝试这个。

$('#id_relative option[datalisted=datalisted]').val()
于 2016-11-21T19:07:54.010 回答
2

我会使用'.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());
});
于 2014-12-19T00:51:45.917 回答
1

尝试 .val() 代替：

var relationshipTemp = $('#TypeList option:selected').val();
于 2014-04-03T17:18:30.377 回答
1

您只需给输入一个 ID，然后像这样使用输入的 val()：

HTML：

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

JS：

$('#typeInput').val();
于 2019-02-15T12:21:40.573 回答
0 
<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>
于 2018-02-06T17:12:54.807 回答
0 
var relationshipTemp = null;
$('input[name=TypeList]').change(function(){
    // YOU CAN PERFORM LOGIC HERE OR CAN SAVE THE VALUE IN ANY VARIABLE
    relationshipTemp = $(this).val();    
});
于 2021-02-04T16:46:14.383 回答
0

你只需给 datalist 一个 id。在脚本中，您可以获得类似 velow 的值：

var ddl = $('[name="TypeList"]').val();
于 2021-11-04T17:22:14.430 回答
-2

解决此问题的简单方法是在从文本输入字段中获取值时执行此操作

姓名：

<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>
于 2017-07-08T07:48:39.957 回答