Javascript选择多个选项

Question

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

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

将数据读入数组很好,我知道如何在选择框中选择一个选项,但是我不知道如何处理在javascript中选择的多个选项.

有人可以帮我找出执行此操作所需的JavaScript吗？

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>

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

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