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

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

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

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

Answer 4

尝试使用 .val() 代替：

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