使用jQuery獲取datalist中的選定值

Question

非常簡單直接。當我想要選擇一個值並將其插入到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(); 

Answer 1

而是試圖.VAL（）：

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

Answer 2

有一個選擇器選擇輸入元素。提到你想要移動值的事件。通過使用.val（）獲取值。

例子：

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

希望這是你在找什麼jsFiddle

Answer 3

我會用 '對（）'：

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不適用於datalist選項，因爲一個數據專家可以爲多個輸入提供建議。如果兩個不同的輸入包含來自列表的兩個不同的建議，這將是選定的一個？

正如在其他評論中提到，你可以檢查輸入的數值上的變化，像這樣：

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

但是，如果你想確保值實際上是從數據列表的選項之一您必須進行額外的檢查，因爲數據列表訪問者仍然可以在輸入中輸入不同的值。 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

試試這個。

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

Answer 6

簡單的解決這個問題是這樣做，你從一個文本輸入字段中獲得的價值

名稱：

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