web-dev-qa-db-fra.com

Obtenir la valeur sélectionnée dans datalist à l'aide de jQuery

Très simple et direct. J'ai pré-renseigné un datalist HTML avec des valeurs, sur le formulaire lorsque je veux sélectionner une valeur et l'insérer dans la base de données SQLite. Ceci est mon exemple de code qui ne fonctionne pas. S'il vous plaît aider. Création de formulaire de datalist 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>

voici l'exemple de code jQuery qui n'a pas fonctionné:

var relationshipTemp = $('#TypeList option:selected').text();
jqueryhtml5html-datalist
6
kehinde

Avoir un sélecteur pour sélectionner l'élément d'entrée. Mentionnez l'événement après lequel vous souhaitez que les valeurs soient déplacées. Obtenez la valeur en utilisant .val (). 

Exemple:

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

J'espère que c'est ce que vous recherchez jsFiddle

15
Pazza22

:selected ne fonctionne pas avec les options datalist, car un datalist peut suggérer plusieurs entrées. Si deux entrées différentes contiennent deux suggestions différentes de la liste, quelle serait celle sélectionnée?

Comme mentionné dans d'autres commentaires, vous pouvez vérifier la valeur de l'entrée sur le changement comme suit:

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

Toutefois, si vous voulez vous assurer que la valeur correspond bien à l'une des options du dataliste, vous devrez effectuer une vérification supplémentaire, car avec un dataliste, les visiteurs peuvent toujours entrer des valeurs différentes dans l'entrée. Datalist propose simplement des suggestions.

Une solution pour vérifier si la valeur est dans le 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
    }
});
5
Stephan Muller

Essaye ça.

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

Je voudrais utiliser '.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

essayez plutôt .val ():

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

Vous donnez simplement un identifiant à votre entrée, puis vous utilisez val () comme suit:

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