web-dev-qa-db-fra.com

Les valeurs datalist HTML d'un tableau en javascript

J'ai un programme simple qui doit prendre les valeurs du fichier texte sur le serveur, puis les renseigner sur le dataliste comme sélection dans le champ de saisie.

À cette fin, la première étape que je souhaite franchir est que je souhaite savoir comment le tableau de javascript peut être utilisé de manière dynamique comme un dataliste.

Mon code est:

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

Je veux remplir le champ de saisie contenant le datalist comme suggestion du tableau. Aussi ici je n'ai pas pris en compte les valeurs du tableau. En fait, je n'ai pas besoin de deux options datalist mais dxnamic en fonction de la longueur du tableau

javascriptarrayshtml5html-datalist
14
Zeeshan

Je ne suis pas sûr d'avoir bien compris votre question. Quoi qu'il en soit, essayez ceci:

<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>
14
Andre Calil

C'est une vieille question à laquelle suffisamment de réponses ont déjà été apportées, mais je vais quand même introduire la méthode DOM ici pour ceux qui n'aiment pas utiliser le code HTML littéral.

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

Voici le violon .

28
Paul Walls

Si vous utilisez ES6, vous pouvez le faire de cette façon, il s’agit des techniques de Paul Walls avec la syntaxe 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>

7
Abdel

Vous pouvez le faire de manière jQuery - mais d’un autre côté, puisque vous traitez des données sur le serveur, vous pouvez générer du code HTML directement à cet emplacement (une simple suggestion).

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

Voici un JSFiddle avec ce code afin que vous puissiez immédiatement l’essayer: http://jsfiddle.net/mBMrR/

1
daxur