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

私は、サーバ上のテキストファイルから値を取り出し、入力テキストフィールドの選択としてデータリストに値を取り込まなければならない簡単なプログラムを持っています。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

出典

2013-07-29 Zeeshan

私はあなたの質問をはっきりと理解しているか分からない。あなたはそれをjQueryの方法を行うことができます

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

出典

2013-07-29 16:45:31

答えに感謝をええ、それは動作しますが、私はます。 \t \t <入力名= "名前" リスト= "anrede" /> <データリストのid = "anrede"> それは働いていませんでしたでしたです間違い – Zeeshan

これはデータリストオブジェクトを作成していないためです。作成されていないIDで取得しています – Zeeshan

@Zeeshanスクリプトが要素の前に置かれているため、機能しません。それはページ全体の前に解析され、処理されます。 –

- しかし、あなたは、サーバー上のデータを処理しているため、他の一方で、あなたはそこに直接（ただの提案を）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>

あなたはimmediatellyそれを試すことができますので、ここでは、このコードでJSFiddleです：http://jsfiddle.net/mBMrR/

出典

2013-07-29 16:50:34 daxur

私はそれを実行すると参照エラー、つまりReferenceError：$は定義されていません。 – Zeeshan

jQueryをダウンロードしてプロジェクトに組み込む必要があります。 – daxur

ええ、それは今働いています...ありがとう、そしてもう一つはあなたの提案です "あなたは直接HTMLを生成するかもしれません（ちょっとした提案です）。 – Zeeshan

これは古い問題であり、すでに十分に答えたが、私は誰のために、とにかくここにDOMメソッドをスローするつもりですリテラル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。

出典

2016-02-18 02:44:36

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>

出典

2017-05-03 10:46:16 Abdel

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

答えて

関連する問題