Dati del datalist Html dalla matrice in javascript

Ho un semplice programma che deve prendere i valori dal file di testo sul server e quindi compilare il datalist come selezione nel campo di testo di input.Dati del datalist Html dalla matrice in javascript

Per questo scopo il primo passo che voglio fare è che voglio sapere come l'array di javascript può essere usato come opzione di un datalist in modo dinamico.

il mio codice è:

<html> 
<script> 

var mycars = new Array(); 
mycars[0]='Herr'; 
mycars[1]='Frau'; 

</script> 

<input name="anrede" list="anrede" /> 
<datalist id="anrede"> 
<option value= mycars[0]></option> 
<option value="Frau"></option> 
</datalist> 
</html>

voglio per popolare il campo di inserimento testo che contiene la datalist come suggerimento dalla matrice. Anche qui non ho tenuto conto dei valori dell'array. In realtà non ho bisogno di due opzioni di datalist ma dxnamic a seconda della lunghezza dell'array

fonte

2013-07-29 Zeeshan

Non sono sicuro di aver capito chiaramente la tua domanda. In ogni caso, provate questo:

<input name="car" list="anrede" /> 
<datalist id="anrede"></datalist> 

<script type="text/javascript"> 
    var mycars = new Array(); 
    mycars[0]='Herr'; 
    mycars[1]='Frau'; 

    var options = ''; 

    for(var i = 0; i < mycars.length; i++) 
    options += '<option value="'+mycars[i]+'" />'; 

    document.getElementById('anrede').innerHTML = options; 
</script>

fonte

2013-07-29 16:45:31

grazie per la risposta sì funziona, ma voglio chiedere una cosa per il concetto che quando stavo cercando \t \t non funzionava era il errore – Zeeshan

è questo a causa di non creare dell'oggetto DataList e sto ricevendo da id che non è stato creato – Zeeshan

@Zeeshan non funziona perché lo script è collocato prima dell'elemento. Viene analizzato ed elaborato prima dell'intera pagina. –

si può fare via jQuery - ma d'altra parte, dal momento che si stanno elaborando i dati sul server, si potrebbe generare codice HTML direttamente lì (solo un suggerimento).

<script> 

var mycars = new Array(); 
mycars[0]='Herr'; 
mycars[1]='Frau'; 

$(document).ready(function() { 
    $(mycars).each(function(index, item) { 
     var option = $('<option value="'+item+'"></option>'); 
     $('#anrede').append(option); 
    }); 
}); 

</script> 

<input name="anrede" list="anrede" /> 
<datalist id="anrede"> 
    <!-- options are filled in the script --> 
</datalist>

Ecco un JSFiddle con questo codice in modo da poter immediatelly provare: http://jsfiddle.net/mBMrR/

fonte

2013-07-29 16:50:34 daxur

quando lo eseguo dice errore di riferimento i.e ReferenceError: $ non è definito. – Zeeshan

Devi scaricare e includere jQuery nel tuo progetto. – daxur

sì funziona ora ... grazie e una cosa in più puoi descrivere che è il tuo suggerimento "potresti generare HTML direttamente lì (solo un suggerimento)." – Zeeshan

Questa è una vecchia questione e già sufficientemente risposto, ma ho intenzione di buttare il metodo DOM in qui comunque per chiunque a cui non piace usare l'HTML letterale.

<input name="car" list="anrede" /> 
<datalist id="anrede"></datalist> 

<script> 
var mycars = ['Herr','Frau']; 
var list = document.getElementById('anrede'); 

mycars.forEach(function(item){ 
    var option = document.createElement('option'); 
    option.value = item; 
    list.appendChild(option); 
}); 
</script>

Here's the fiddle.

fonte

2016-02-18 02:44:36

Se si utilizza ES6, è possibile farlo in questo modo, si tratta delle tecniche di Paul Walls con sintassi ES6.

const list = document.getElementById('anrede'); 
 

 
['Herr','Frau'].forEach(item => { 
 
    let option = document.createElement('option'); 
 
    option.value = item; 
 
    list.appendChild(option); 
 
});

<input name="car" list="anrede" /> 
 
<datalist id="anrede"></datalist>

fonte

2017-05-03 10:46:16 Abdel

Dati del datalist Html dalla matrice in javascript

risposta

Problemi correlati