Javascript 选择多个选项

Question

我有一个带有允许多个选项的选择框的表单。用户保存这些选项后，会将它们存储在数据库表中。

然后我可以读取此数据库表以获取他们再次选择的选项。我需要能够从数据库中获取这些数据，将其放入一个数组中，然后在他们去“编辑”他们的选项时预先选择该选择框中的选项。

将数据读入数组很好，我知道如何在选择框中选择单个选项，但是我不确定如何处理在 javascript 中选择的多个选项。

有人可以帮我弄清楚执行此操作所需的 javascript 吗？

原文由 Dave Hunt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

纯javascript解决方案

<select id="choice" multiple="multiple">
  <option value="1">One</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<script type="text/javascript">

var optionsToSelect = ['One', 'three'];
var select = document.getElementById( 'choice' );

for ( var i = 0, l = select.options.length, o; i < l; i++ )
{
  o = select.options[i];
  if ( optionsToSelect.indexOf( o.text ) != -1 )
  {
    o.selected = true;
  }
}

</script>

虽然我同意这应该在服务器端完成。

原文由 Peter Bailey 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

这种类型的事情应该在服务器端完成，以限制客户端用于此类琐碎任务的资源量。话虽这么说，如果你要在前端做，我会鼓励你考虑使用类似 underscore.js 的东西来保持代码简洁明了：

 var values = ["Red", "Green"],
    colors = document.getElementById("colors");

_.each(colors.options, function (option) {
    option.selected = ~_.indexOf(values, option.text);
});

如果您使用的是 jQuery，它可能会更简洁：

 var values = ["Red", "Green"];

$("#colors option").prop("selected", function () {
    return ~$.inArray(this.text, values);
});

如果你在没有像 underscore.js 或 jQuery 这样的工具的情况下这样做，你将有更多的东西要写，并且可能会发现它有点复杂：

 var color, i, j,
    values = ["Red", "Green"],
    options = document.getElementById("colors").options;

for ( i = 0; i < values.length; i++ ) {
    for ( j = 0, color = values[i]; j < options.length; j++ ) {
        options[j].selected = options[j].selected || color === options[j].text;
    }
}

原文由 Sampson 发布，翻译遵循 CC BY-SA 3.0 许可协议