如何使用javascript在多选中设置选定的选项答案

【问题标题】：How to set the selected options in multiselect with javascript如何使用javascript在多选中设置选定的选项
【发布时间】：2012-11-20 06:36:52
【问题描述】：

好的，所以这个问题之前肯定有人问过，我实际上能够在 jquery 中找到我的问题的答案，当我尝试实现答案时，我无法让它工作。我宁愿在 java-script 中这样做......

我正在从数据库中读取一串用逗号分隔的文本，我想将这些文本转换为多选框中的选定选项。

到目前为止，我一直在尝试让浏览器选择一个与硬编码字符串匹配的选项，当我单击一个按钮时，我什至无法让它工作。但我想，既然我在问这个问题，我不妨写出整个脚本，这样你就可以看到这一切，也许还能发现我可能遇到的任何其他问题......最后，我怎样才能让它运行在页面的负载上？对不起，如果这是多余的和基本的，但我对 JS 很陌生，并且找到问题的现有答案几乎没有帮助。提前致谢。

编辑

所以，我发现如果按照 Asad 的回答使用 'select.options[i].value=true'（布尔值而不是字符串），我可以让分配工作。但是，我使用的是 Harvest 的选择多选控件：http://harvesthq.github.com/chosen/

当我将所选类分配给控件后，脚本将无法工作。我知道控件正在调用 JQuery，这是原因吗？有可能让它工作吗？再次感谢。

function selectitems() {
  var select = document.getElementById("multiselectid");
  var array = stringFromDB.split(",");

  for(count=0, count<array.length, count++) {
    for(i=0; i<select.options.length; i++) {
      if(select.options[i].value == array[count]) {
        select.options[i].selected="selected";
      }
    }
  }
}

【问题讨论】：

除了声明i 和count，您只需要使用正确的值类型：select.options[i].selected=true，因为选定的属性（和属性）是布尔值。您最初应该将它们全部设置为false。

标签： javascript

【解决方案1】：

您的第一个 for 循环有两个语法错误。尝试在浏览器中检查控制台

for(count=0, count<array.length, count++) {

应该是：

for(count=0; count<array.length; count++) {

注意“，”到“;”的变化在count=0 和count<array.length 部分之后。

此外，您可能希望使用 for(var count=0 和 for(var i=0，以便不全局声明 count 和 i 变量。

【讨论】：

@Caderade 没问题。正如我在另一个已删除的答案中指出的那样，如果您在修复 for 循环问题后使用 $("#multiselectid").trigger("liszt:updated");，它应该重新生成所选控件中的项目。
天哪！谢谢伊恩！我不知道你怎么这么快就知道了，但它成功了！万分感谢！我想知道其他答案及其一串 cmets 发生了什么。没想到被删了但是真的很快，我将如何在页面加载时运行它？是不是把脚本放在正文末尾那么简单？因为这似乎没有这样做......
使用那个 JFiddle，我注意到它使用了多选的索引，是否有可能有一个与 Jquery 等效的“Indexof”，所以我可以输入选项的值而不是索引？因为我再次将选项的值与数据库中的字符串数组相匹配，所以我真的不知道那个时候的索引是什么。虽然我想我可以编写另一个脚本来做到这一点
甜蜜，我很感激！而且我不知道扩展的 cmets 是否合适（大约 3 小时前我是 stackoverflow 的新手）但我不知道如何给你发消息，而且看起来我没有足够的代表来移动聊天或投票支持您的代表。我很惊讶我什至可以问一个问题。无论如何，该脚本使用您的“$(document).ready”技巧在页面加载上工作，我只知道如何使用它，因为我已经将它用于所选控件。感谢第四次喜欢
太搞笑了。亲爱的人，我真的很感激！老实说（不要在这件事上评判我），我不明白为什么 JQuery 可以工作哈哈，但只要浏览器得到它，我想这才是真正重要的。你今天非常有帮助，如果我能投票给你，我真的会的。保持真实。

【解决方案2】：

好的，所以我将尝试在我的回答中解决您问题的所有部分。

正如 Ian 所说，您的 for 语句中有语法错误。

再三考虑我会给出代码然后做解释。为了清楚起见，我已经包含了整个 HTML 文档：

<!DOCTYPE html>
<html lang=en-CA>
    <meta charset=utf-8>
    <title>JavaScript in multi-select</title>

    <script>

    function selectItems(stringFromDB) {
        'use strict';

        var select = document.getElementById("multiselectid"),
            stringArray = stringFromDB.split(","),
            count = 0,
            i;

        for(count = 0; count < stringArray.length; count += 1) {
            for(i = 0; i < select.options.length; i += 1) {
                if(select.options[i].value === stringArray[count]) {
                    select.options[i].selected = true;
                }
            }
        }
    }

    window.addEventListener('load', function() {
        'use strict';

        // The "string from DB" would be the parameter here
        selectItems( 'hockey,volleyball,football');
    }, false);

    </script>

    <body>
        <div>
            <select id='multiselectid' multiple>
                <option value="hockey">Hockey</option>
                <option value="golf">Golf</option>
                <option value="volleyball">Volleyball</option>
                <option value="football">Football</option>
            </select>
        </div>

现在解释一下。

我没有使用 body 元素上的传统 onload 事件属性在页面加载时运行脚本（如您所愿），而是将带有事件 load 的事件处理程序附加到 window DOM 元素。事件处理程序更有用，因为它们有助于将 JavaScript 与 HTML 分开（以及许多其他原因）。您可以在此处阅读有关事件处理程序的更多信息：https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener
在函数selectItems() 中，我已将所有变量放在一个声明中以保持代码整洁。

3。为了避免数组的潜在问题，我改为调用变量stringArray。 array 是 JavaScript 中的保留字，可能会导致某些浏览器出现问题，尽管我不完全确定哪些浏览器（如果有的话）。
总是、总是、总是使用=== 而不是==。这样你就可以确定比较是严格和正确的（即被比较的两个东西都是相同的类型，在这种情况下：字符串）。
使用'use strict;' 强制在严格模式下处理 JavaScript 函数是个好主意。这样，如果浏览器检测到不允许的内容，它将停止（并抛出异常），从而允许您编写更好的 JavaScript 代码。

希望这对您有所帮助，如果您仍然感到困惑，请随时提出更多问题！

【讨论】：

1. 我不确定使用addEventListener 比.onclick 更有助于将Javascript 与HTML 分开。 2. 一个声明不一定更干净，尤其是当您将其设为一大行时。 3. "array" 不是保留字..."Array" 是...Javascript 区分大小写。 4. === 并不总是正确的选择 - 这是一个完美的例子，因为有些人可能不确定 .value 返回什么（它总是一个字符串）或 .split，但如果你在比较它们，没有理由不使用==。
1. 最初，OP 想要“在 java-script[sic] 中执行此操作”，因此在这种情况下，addEventListener 将是 onload 的替代方案。但是使用 jQuery，$(document).ready( function() { ... }); 已经将 JavaScript 与 HTML 分开了。 2. 你可以把它放在多行，但 IMO 一个声明更干净。 3. 我的立场是正确的。 4. === 是正确的选择。由于.val() 和.value 返回字符串，您应该将字符串与它进行比较。
@rink.attendant.6 - 感谢您的帖子 - 变量声明部分绝对更干净，将字符串作为函数的参数并在内部进行拆分很有意义。我要求 JS 的原因是因为它更容易让我理解……Jquery 太陌生了。虽然我会说，最终还是使用了 Ian 的 $(document).ready 想法，因为我已经在使用它（我什至没有意识到）。再次......我很新。非常感谢您的帮助。
@rink.attendant.6 1. 是的，但是“将 Javascript 与 HTML 分离”并没有真正的区别——它们都以同样的方式......虽然我这样做了同意addEventListener 是绑定事件的更好选择。 2. 关于如何声明有很多争论，但我喜欢的另一种选择是使用 var 声明，但在每个“，”之后放置一个换行符，以便个人很容易看到并排队。 3. 只是想指出这一点。 4. 如果你知道你在比较字符串，那么=== 和== 之间没有区别。不想吹毛求疵