Lấy giá trị được chọn trong datalist bằng cách sử dụng jQuery

Question

Rất đơn giản và thẳng về phía trước. Tôi đã điền trước một nhà dữ liệu HTML với các giá trị, trên biểu mẫu khi tôi muốn chọn một giá trị và chèn nó vào cơ sở dữ liệu SQLite. Đây là mã ví dụ của tôi không hoạt động. Xin hãy giúp đỡ. HTML5 dạng datalist tạo:

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

đây là mẫu mã jquery mà không làm việc:

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

Answer 1

thử .val() thay vì:

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

Answer 2

Có một selector để chọn yếu tố đầu vào. Đề cập đến sự kiện mà sau đó bạn muốn các giá trị được di chuyển. Lấy giá trị bằng cách sử dụng .val().

Ví dụ:

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

Hy vọng điều này là những gì bạn đang tìm kiếm jsFiddle

Answer 3

Tôi sẽ sử dụng '.Trên()':

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

:selected không hoạt động trên datalist tùy chọn, vì một nhà dữ liệu có thể cung cấp đề xuất cho nhiều mục nhập. Nếu hai đầu vào khác nhau chứa hai đề xuất khác nhau từ danh sách, thì đó sẽ là đề xuất được chọn?

Như đã đề cập trong ý kiến ​​khác, bạn có thể kiểm tra giá trị của đầu vào thay đổi như sau:

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

Tuy nhiên, nếu bạn muốn chắc chắn rằng giá trị thực sự là một trong những tùy chọn từ datalist bạn sẽ phải làm một kiểm tra bổ sung, như với một khách truy cập datalist vẫn có thể nhập các giá trị khác nhau trong đầu vào. Datalist chỉ cung cấp các đề xuất.

Một giải pháp để kiểm tra nếu giá trị là trong 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 5

Hãy thử điều này.

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

Answer 6

giải pháp đơn giản cho vấn đề này là làm điều đó khi bạn nhận được giá trị từ một trường nhập văn bản

Tên:

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

Answer 7

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