web-dev-qa-db-ja.com

JavaScriptの配列からのHtmlデータリスト値

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

この目的のために私がとりたい最初のステップは、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が必要です

javascriptarrayshtml5html-datalist
15
Zeeshan

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

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

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

フィドルがあります 。

30
Paul Walls

ES6を使用している場合、この方法で実行できます。これは、ES6構文を使用したPaul Wallsのテクニックです。

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

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/

1
daxur