Html datalist values from array in javascript

2019-03-24 15:45发布

站内问答 / JavaScript
1317 4 5

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

4条回答
叛逆
2楼-- · 2019-03-24 16:24

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>
查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2019-03-24 16:24

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>

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
4楼-- · 2019-03-24 16:44

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.

查看更多
0人赞 添加讨论(0) 举报
The star\"
5楼-- · 2019-03-24 16:44

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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)