28

サーバー上のテキストファイルから値を取得し、入力テキストフィールドの選択としてデータリストに入力する必要がある単純なプログラムがあります。

この目的のために、私が取りたい最初のステップは、javascript の配列をデータリスト オプションとして動的に使用する方法を知りたいということです。

私のコードは：

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

配列からの提案として、データリストを含む入力テキスト フィールドに入力したいと考えています。また、ここでは配列の値を考慮していません。実際には2つのデータリストオプションは必要ありませんが、配列の長さに応じてdxnamicが必要です

4

6 に答える 6

41

これは古い質問であり、すでに十分に回答されていますが、リテラル 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>

これがフィドルです。

于 2016-02-18T02:44:36.683 に答える
29

あなたの質問を明確に理解できたかどうかわかりません。とにかく、これを試してください：

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>

于 2013-07-29T16:45:31.070 に答える
2

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/

于 2013-07-29T16:50:34.733 に答える