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

EDIT删除了最后一个 $ 包装器，optionsAsString因为它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 回答
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>
于 2016-02-17T17:19:21.840 回答
3 
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>
于 2013-07-30T11:04:15.270 回答
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 回答
1

对于不想使用 jQuery 的人来说，这是一个解决方案：

const select = document.getElementById('select')

const arr = ['Apple', 'Pear', 'Orange']

arr.forEach(value => {
  const option = document.createElement('option')
  option.innerHTML = value
  select.appendChild(option)
})
<select id="select"></select>

于 2021-09-10T15:51:26.883 回答
0

我通常这样做：

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

于 2017-08-22T12:03:35.900 回答
-5

您可以为选择 id=inptProduct 设置 id 然后执行 $('#inptProduct').val(yourselectValue)

于 2012-04-20T13:43:10.643 回答