javascript - 使用 JavaScript 动态设置选择选项

标签 javascript jquery

如何使用 Javascript 从我的 html 选择字段动态设置选项? 这是我的页面设置:

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


解决方案: 这是我一直在寻找的最终解决方案。它不会将新选项应用于选择字段。它首先删除所有内容,然后添加新内容:

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

最佳答案

好吧,你几乎完成了这一切:

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

编辑 删除了最后一个 optionsAsString 周围的 $ 包装器,因为 append 会自动转换字符串

关于javascript - 使用 JavaScript 动态设置选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10247423/

相关文章:

javascript - Uncaught ReferenceError : stLight is not defined (in Chrome only)

javascript - 可以通过调度单个 redux 操作来更新多个 reducer 吗?

jquery mouseover如何使用获取当前隐藏值

javascript - 如何使用 jQuery 对基于特定列或索引的表进行总计?

javascript - 如何禁用 .select2() javascript?

javascript - 隐藏第一个表单,然后显示第二个表单。第二个表单执行多次提交

javascript - 单选按钮 - 初始检查并单击检查

javascript - 使用 CSS 循环颜色过渡

jquery - Bootstrap 3 轮播不起作用。 (是的,我在 Bootstrap 之前加载了 jQuery)

javascript - 满足条件时拉取数据属性列表