Come visualizzare il testo in HTML5 DataList e non apprezzi

<!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/Come visualizzare il testo in HTML5 DataList e non apprezzi

Ho allegato un violino. Si prega di controllare. La soluzione che voglio raggiungere è quando clicco sul menu a discesa viene visualizzato il valore, ma voglio che il testo 1,2,3,4,5 venga visualizzato. Devo usare una risposta JSON per il mio problema reale.Solo il testo dovrebbe essere visualizzato e il valore dovrebbe essere nascosto come un dropdown generale. Questa funzionalità di completamento automatico è necessaria altrimenti sarei andato con il normale menu a discesa.

fonte

2014-09-02 Cerebus1504

È possibile spostare "valore" su un altro parametro (ad esempio, "valore dati") e impostare 1,2,3,4,5 come "valore". – Regent

Ma ho bisogno di inviare il valore al back-end usando jquery. – Cerebus1504

È possibile inviare "valore dati" anziché "valore" – Regent

Modifica, aggiornato

seguito Regent

provare (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/

fonte

2014-09-02 06:18:32 guest271314

Come recuperare il valore e inviare prima ho usato per digitare $ ("# browser"). Val(). – Cerebus1504

@ Cerebus1504 Beh, forse [fiddle] (http://jsfiddle.net/j7ehtqjd/3/) dal commento della mia domanda dovrebbe essere aggiunto per rispondere per la sua completezza – Regent

Ok cercherò di non ottenerlo – Cerebus1504

Come visualizzare il testo in HTML5 DataList e non apprezzi

risposta

Problemi correlati