Html datalist values from array in javascript

问题

I have a simple program which has to take the values from the text file on server and then populate on the datalist as the selection in the input text field.

For this purpose the first step i want to take is that i want to know that how the array of javascript can be used as a datalist options dynamically.

My Code is :

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

I want to populate the input text field containing the datalist as suggestion from the array. Also here I havenot take into account the array values. Actually i need not two datalist options but dxnamic depending on the array length

回答1:

I'm not sure if I understood your question clearly. Anyway, try this:

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

回答2:

This is an old question and already sufficiently answered, but I'm going to throw the DOM method in here anyway for anyone that doesn't like to use literal HTML.

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

回答3:

If you are using ES6 you could do it this way, this is Paul Walls techniques with ES6 syntax.

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>

回答4:

You can do it jQuery way - but on the other hand, since you are processing data on the server, you might generate HTML directly there (just a 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>

Here's a JSFiddle with this code so you can immediatelly try it: http://jsfiddle.net/mBMrR/

来源：https://stackoverflow.com/questions/17929356/html-datalist-values-from-array-in-javascript

标签

javascript

arrays

html5

html-datalist