2011-01-04 6 views
0

これはjqueryやAJAXなしで達成したい比較的簡単な作業です。複数のドロップダウンメニューに静的な値を入力する

私はいくつかのjavascript配列AとBを持っています。そして、それぞれがAとBの内容を含むドロップダウンを含む2つの列を含むHTMLフォームの複数の行を持っています。事前定義された項目のセットを持つ特定の名前。これは、ページが既にロードされた後に行うことができます。

javascriptの外観は? 1つの名前の商品を数多く扱うにはどうすればよいですか?

+0

あなたは、それぞれが複数のアレイ内の値で指定された名前に一致する選択埋めるためにしたいですか?それは私が読んでいるものですか? – Hemlock

+0

static!= javascript。何が私はここに逃しています/ – jcolebrand

+0

両方の答えがお金に見える、私は明日私のテストケースを完了することになるでしょう。 「静的」とは、私がこの質問に対する回答を探す際に、「私はどのようにしてドロップダウンを他のドロップダウンを動的に変更するのですか?」という質問とは区別しています。 – Amalgovinus

答えて

1

これはあなたのアレイのうちの1つのコードは次のとおりです。

// String values; can be used as name, id, or innerHTML 
var valsA = ['one','two','three']; 
// Variable to store <option> object 
var opt; 

// Loop through vals and make an <option> for each one 
for(var i=0;i<valsA.length;i++) { 
    // Create node 
    opt = document.createElement("OPTION"); 
    // Set innerHTML, if you want 
    opt.innerHTML = valsA[i]; 
    // Set the names to be all the same, if you want 
    opt.setAttribute("name","oneThing"); 
    // Set unique ID, somehow, if you want 
    opt.id = "value"+i+valsA[i]; 
    // Finally, append <option> to dropdown menu 
    document.getElementById('myDropdown').appendChild(opt); 
} 

あなたのHTMLは、このスクリプトを実行する前に行くために<select id='myDropdown'></select>準備ができている必要があります。他の配列に対しても同じ処理を行うことができます。また

は、名前

  • は必ずしも一意ではありません覚えておいて
  • は、項目のグループを取得するために使用することができます

のID

  • は一意である必要がありながら
  • 残念ながら、あなたのスクリプトは、ない再、これはエラー
  • のソースすることができ、あなたのスクリプトが正しくそれを見つけることができますので、あなたのドロップダウンのそれぞれが固有のIDを持っていることを確認し、だから、単一のオブジェクト

を取得するために使用する必要があります。

+0

私は 'x'ではなく' i'をインクリメントしたいと思うかもしれません。 – alex

+0

@alex - ありがとうございます。 – Ben

1

あなたのHTMLは次のようにlookes場合:

<body> 
    <select id="fillme" name="fillme"></select> 
    <select id="fillme" name="fillme"></select> 
    <select id="fillme" name="fillme"></select> 
    <select id="fillme" name="fillme"></select> 
</body> 

そして、あなたは、単に複数のアレイからの値を入力します:

var a = ['one','two','three']; 
var b = ['four', 'five']; 

あなたは配列を連結している限り(getElementsByNameを使用することができます選択には名前にも一致するidsがあり、IEにはそれが必要です)。

var values = a.concat(b); 
var selects = document.getElementsByName('fillme'); 

var i = selects.length; 
while (i--) { 
    var select = selects[i]; 
    for (var j=0,length=values.length; j<length; j++) { 
     select.add(new Option(values[j])); 
    } 
}​ 

JSBinデモ:http://jsbin.com/ehoni4/2

関連する問題