Le datalist HTML5 peut-il différencier le texte valeur et option? - html5, select, html-datalist

L'élément attribut de liste / datalist de HTML5formes montre un menu déroulant de choix parmi lesquels vous pouvez choisir, modifier et même taper du texte. Tout cela peut être réalisé à la fois avec un code propre et puissant:

<input list="states">
<datalist id="states">
<option value="One">
<option value="Two">
</datalist>

Cependant, comment faire en sorte qu'un tel formulaire envoie une valeur différente du texte de l'option, comme dans la sélection / option habituelle (ci-dessous)?

<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>

Réponses:

Il semble que vous ne pouvez pas utiliser du HTML pur sans utiliser l’aide de JS + CSS.

essayez ceci, j'espère que cela vous aidera.

html

<input id="datalisttestinput" list="stuff" ></input>
<datalist id="stuff">
<option id="3" value="Collin" >
<option id="5" value="Carl">
<option id="1" value="Amy" >
<option id="2" value="Kristal">
</datalist>

scénario

function GetValue() {
var x = $("#datalisttestinput").val();
var z = $("#stuff");
var val = $(z).find("option[value="" + x + ""]");
var endval = val.attr("id");
alert(endval);
}

Meilleurs vœux Kumar

Vous trouverez ci-dessous la réponse modifiée de Kumah qui utilise un champ caché pour contenir la valeur qui est finalement envoyée au serveur.

$("#inputStates").change(function(){
var c =  $("#inputStates").val();
$("#inputStates").val(getTextValue());
$("#statesHidden").val(c);
});

function getTextValue(){
var val =  $("#inputStates").val();
var states = $("#states");
var endVal = $(states).find("option[value="" + val + ""]");
//depending on your logic, if endVal is empty it means the value wasn"t found in the datalist, you can take some action here
return endVal.text();
}