Ottieni il valore selezionato nel datalist usando jQuery

Question

Molto semplice e diretto. Ho pre-compilato un datalista HTML con valori, sul modulo quando voglio selezionare un valore e inserirlo nel database SQLite. Questo è il mio codice di esempio che non funziona. Per favore aiutatemi. HTML5 creazione di moduli 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> 

questo è il codice di esempio jquery che non ha funzionato:

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

Answer 1

provare .VAL() invece:

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

Answer 2

Avere un selettore per selezionare l'elemento di input. Indicare l'evento dopo il quale si desidera spostare i valori. Ottieni il valore usando .val().

Esempio:

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

Spero che questo è quello che stai cercando jsFiddle

Answer 3

avrei usato '.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

Answer 4

:selected non funziona sulle opzioni datalist, in quanto un fornitore di dati può fornire suggerimenti per più ingressi. Se due input diversi contengono due suggerimenti diversi dall'elenco, quale sarebbe quello selezionato?

Come detto in altri commenti, è possibile controllare il valore dell'ingresso sul cambiamento in questo modo:

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

Tuttavia, se si vuole fare in modo che il valore è in realtà una delle opzioni dal datalist dovrai fare un controllo extra, dato che con i visitatori del datalist possono ancora inserire valori diversi nell'input. Datalist offre solo suggerimenti.

Una soluzione per controllare se il valore è nella 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

Prova questa.

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

Answer 6

semplice soluzione a questo problema è farlo come si ottiene il valore da un campo di immissione testo

Nome:

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