web-dev-qa-db-ja.com

jQueryを使用してデータリストで選択した値を取得する

非常にシンプルでわかりやすい。値を選択して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();
jqueryhtml5html-datalist
8
ken4ward

入力要素を選択するセレクターがあります。値を移動するイベントの後に言及します。 .val（）を使用して値を取得します。

例：

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

これがあなたが探しているものであることを願ってください jsFiddle

18
Pazza22

:selectedはdatalistオプションでは機能しません。1つのデータリストが複数の入力の候補を提供できるためです。 2つの異なる入力にリストからの2つの異なる提案が含まれている場合、どちらが選択されますか？

他のコメントで述べたように、変更時に入力の値を次のように確認できます。

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

ただし、値が実際にデータリストのオプションの1つであることを確認したい場合は、追加のチェックを行う必要があります。データリストの場合、訪問者は引き続き入力に異なる値を入力できます。データリストは提案を提供するだけです。

値がデータリストにあるかどうかを確認するソリューション：

$("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
    }
});
6
Stephan Muller

これを試して。

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

私は「.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());
});
2
Christian

簡単な方法は、データリストの名前属性を使用してデータリストの名前を取得し、val()関数を使用して、選択された値を確認することです。

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

実際の例を確認してください https://jsfiddle.net/ch9uwvod/8/

1
Vijai Sebastian

代わりに.val（）を試してください：

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

入力にIDを指定し、次のように入力のval（）を使用するだけです。

HTML：

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

JS：

$('#typeInput').val();
0
cslotty
<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>
0
HARSHVARDHAN RAJPUROHIT