51

Javascript を使用して HTML 選択フィールドからオプションを動的に設定するにはどうすればよいですか? これは私のページ設定です:

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

配列にすべての値があります。これは、<option>s を設定する場所です。

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

PS: jQuery を使用できます。

解決策: これが私が探していた最終的な解決策です。新しいオプションは選択フィールドには適用されません。最初にすべてを削除してから、新しいものを追加します。

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));
4

8 に答える 8

46

さて、あなたはほとんどすべてをやった：

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

EDIToptionsAsStringは、文字列をappend自動的に変換するため、最後の $ ラッパーを削除しました

于 2012-04-20T13:43:07.413 に答える
26 
var $inputProduct = $("select[name='inputProduct']")

$(productArray).each(function(i, v){ 
    $inputProduct.append($("<option>", { value: v, html: v }));
});
于 2012-04-20T13:42:12.963 に答える
1

純粋な JavaScript で作業を行う必要がない場合は、jQuery を使用して簡単に作業を行うことができます。

<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>');
    }

ここでは select タグの id を使用していることに注意してください。そのため、html 部分も追加します。jQueryを追加する方法を知っていることを願っています。

于 2016-05-12T09:33:24.577 に答える
-5

select id=inptProduct の id を設定できます 次に $('#inptProduct').val(yourselectValue) を実行します

于 2012-04-20T13:43:10.643 に答える