JavaScriptで選択オプションを動的に設定する

Question

JavaScriptを使用してhtml selectフィールドからオプションを動的に設定するにはどうすればよいですか？ これは私のページ設定である：私は、配列内のすべての値を持っている

<form name="test"> 
    <table> 
    <tr> 
     <td class='dataleft'>Product: </td> 
     <td><select name='inptProduct'></select></td> 
    </tr> 
    </table> 
</form> 

。これは、<option>を設定する場所です。

for(var i = 0; i < productArray.length; i++) { 
    console.log("<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"); 
} 

PS：jQueryを使用できます。

---

ソリューション： これは私が探していた最終的な解決策です。選択フィールドに新しいオプションは適用されません。これは、すべての最初のを削除し、新しいものを追加します：wellyouはほとんどそれをすべて行っている

var optionsAsString = ""; 
for(var i = 0; i < productArray.length; i++) { 
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"; 
} 
$("select[name='inptProduct']").find('option').remove().end().append($(optionsAsString)); 

Answer 1

を：

var optionsAsString = ""; 
for(var i = 0; i < productArray.length; i++) { 
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"; 
} 
$('select[name="inptProduct"]').append(optionsAsString); 

appendとして最後optionsAsString周りEDIT削除$ラッパーが自動的に文字列を変換し、

Answer 2

var $inputProduct = $("select[name='inputProduct']") 

$(productArray).each(function(i, v){ 
    $inputProduct.append($("<option>", { value: v, html: v })); 
}); 

Answer 3

あなたはselect id = inptProductのIDを設定できます 次に$ （「#inptProduct」）。ヴァル（yourselectValue）

Answer 4

function onLoad() { 

    var type = new Array("Saab","Volvo","BMW"); 

    var $select = $("select[name='XXXXXType']") 
    alert($select); 
    $(type).each(function(i, v){ 
     $select.append($("<option>", { value: v, html: v })); 
     }); 

} 

<select name="XXXXXType" id="XXXXXType"></select> 

Answer 5

アレイproductArrayが各要素はオプションの値であるとの単純な配列、およびそのオプションの所望のタイトルであると仮定すると。

$('select[name="inptProduct"]') 
    .html('<option>' + productArray.join('</option><option>') + '</option>'); 

例：

productArray = ['One', 'Two', 'Three']; 

// With the original code being 

<select name="inptProduct"> 
    <option>There could be no options here</option> 
    <option>Otherwise, any options here will be overwritten</option> 
</select> 

// Running the code above would output 

<select name="inptProduct"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 

Answer 6

あなたは仕事をするために、純粋なJavaScriptが主張していない場合は、簡単にjQueryを使って仕事をしてすることができます。ここで私は、selectタグのIDを使用

<form name="test"> 
    <table> 
    <tr> 
     <td class='dataleft'>Product: </td> 
     <td><select id='inptProduct'></select></td> 
    </tr> 
    </table> 
</form> 


for (var i = 0; i < productArray.length; i++) { 
    $("#inptProduct").append('<option value=' + if_you_want_set_value + '>' + productArray[i] + '</option>'); 
    } 

注意。だから私はhtmlパーツも追加しています。 jQueryを追加する方法が分かっていれば幸いです。

Answer 7

私は通常、このようにそれを実行します。

document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>"。