Wie der Text in Datalist html5 anzuzeigen und den Wert nicht

<!DOCTYPE html> 
<html> 
<body> 

<input list="browsers" name="browser"> 
<datalist id="browsers"> 
    <option value="Internet Explorer">1</option> 
    <option value="Firefox">2</option> 
    <option value="Chrome">3</option> 
    <option value="Opera">4</option> 
    <option value="Safari">5</option> 
</datalist> 
<input type="submit"> 
</form> 

</body> 
</html>

http://jsfiddle.net/j7ehtqjd/1/Wie der Text in Datalist html5 anzuzeigen und den Wert nicht

ich eine Geige angebracht habe. Bitte prüfe. Die Lösung, die ich erreichen möchte, ist, wenn ich auf das Dropdownfeld klicke, wird der Wert angezeigt, aber ich möchte den Text 1,2,3,4,5 angezeigt werden. Ich muss eine json Antwort für mein tatsächliches Problem verwenden. Nur der Text sollte angezeigt werden und der Wert sollte wie ein allgemeines Dropdown ausgeblendet werden. Diese Autocomplete-Funktion ist notwendig, sonst wäre ich mit dem normalen Dropdown-Menü gegangen.

Quelle

2014-09-02 Cerebus1504

Sie können "Wert" auf einen anderen Parameter (z. B. "Datenwert") verschieben und 1,2,3,4,5 als "Wert" festlegen. – Regent

Aber ich muss den Wert mit jquery an das Back-End senden. – Cerebus1504

Sie können 'data-value' anstelle von' value' senden – Regent

bearbeiten, aktualisiert

Regent Nach

Try (v3)

html

<input id="selected" list="browsers" name="browser"> 
<datalist id="browsers"> 
    <option data-value="InternetExplorer" value="1"></option> 
    <option data-value="Firefox" value="2"></option> 
    <option data-value="Chrome" value="3"></option> 
    <option data-value="Opera" value="4"></option> 
    <option data-value="Safari" value="5"></option> 
</datalist> 
<input id="submit" type="submit">

$(document).ready(function() { 

var data = {}; 
$("#browsers option").each(function(i,el) { 
    data[$(el).data("value")] = $(el).val(); 
}); 
// `data` : object of `data-value` : `value` 
console.log(data, $("#browsers option").val()); 


    $('#submit').click(function() 
    { 
     var value = $('#selected').val(); 
     alert($('#browsers [value="' + value + '"]').data('value')); 
    }); 
});

jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

Quelle

2014-09-02 06:18:32 guest271314

Wie man Wert abruft und früher sendet, gab ich $ ein ("# browsers"). Val(). – Cerebus1504

@ Cerebus1504 Nun, vielleicht [Geige] (http://jsfiddle.net/j7ehtqjd/3/) aus meiner Frage Kommentar sollte hinzugefügt werden, um für ihre Vollständigkeit zu beantworten – Regent

Ok ich werde versuchen, ich bekomme es nicht – Cerebus1504

Wie der Text in Datalist html5 anzuzeigen und den Wert nicht

Antwort

Verwandte Themen