JavaScript中数组中的HTML数据列表值

k3bvogb1  于 2023-05-15  发布在  Java
关注(0)|答案(7)|浏览(99)

我有一个简单的程序,它必须从服务器上的文本文件中获取值,然后在数据列表中填充输入文本字段中的选择。
为此,我想采取的第一步是,我想知道如何将JavaScript数组动态地用作datalist选项。
我的代码是:

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

我想填充包含datalist的输入文本字段作为数组的建议。这里我也没有考虑数组的值.实际上,我不需要两个datalist选项,而是需要dxnamic,这取决于数组的长度

jjjwad0x

jjjwad0x1#

这是一个老问题,已经有了足够的答案,但我还是要在这里为那些不喜欢使用文字HTML的人提供DOM方法。

<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

zzzyeukh

zzzyeukh2#

我不确定我是否清楚地理解了你的问题。不管怎样,试试这个:

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;
<input name="car" list="anrede" />
<datalist id="anrede"></datalist>
utugiqy6

utugiqy63#

如果你使用的是ES6,你可以这样做,这是Paul Walls技术与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>
x759pob2

x759pob24#

你可以用jQuery的方式来做--但另一方面,由于你是在服务器上处理数据,你可能会直接在那里生成HTML(只是一个建议)。

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

下面是一个包含此代码的JSFiddle,因此您可以立即尝试它:http://jsfiddle.net/mBMrR/

eblbsuwk

eblbsuwk5#

还有一个构造函数来创建一个选项:new Option()

const
  dtl_anrede = document.getElementById('anrede')
, myCars     =  ['Herr','Frau' ]
  ;

myCars.forEach(car => dtl_anrede.appendChild( new Option('',car)))
<input name="car" list="anrede" />
<datalist id="anrede"></datalist>
jfewjypa

jfewjypa6#

一种更高效的方法是使用fragment
动态地将选项元素添加到<datalist>中,但不是添加列表中的每个项目,而是使用fragment来避免回流,并将它们呈现到DOM中一次。

var datalist = document.getElementById('anrede');
var fragment = document.createDocumentFragment();

var myCars = ['Herr', 'Frau'];

// Prepare the option elements to be rendered.
myCars.forEach(function(car) {
  var option = document.createElement('option');
  var text = document.createTextNode(car);

  option.value = car;
  option.appendChild(text);
  fragment.appendChild(option);
});

// Append all of them to DOM.
datalist.appendChild(fragment);
<input name="anrede" list="anrede" />
<datalist id="anrede"></datalist>
yfwxisqw

yfwxisqw7#

const datalist = document.getElementById('anrede');
for (const item of myCars) 
  datalist.appendChild(new Option(null,item));

这是最高效、最简洁的方法。

相关问题