5

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

我正在从数据库中读取一串用逗号分隔的文本，我想将它们翻译成多选框中的选定选项。

到目前为止，我所做的只是试图让浏览器在我单击按钮时选择一个与硬编码字符串匹配的选项，但我什至无法让它工作。但我想，既然我在问这个问题，我不妨写出整个脚本，这样你就可以看到这一切，也许还能发现我可能遇到的任何其他问题......最后，我怎样才能让它运行在页面的负载上？抱歉，如果这是多余的和基本的，但我对 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";
      }
    }
  }
}
4

2 回答 2

2

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

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

应该：

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

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

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

于 2012-11-20T06:47:27.227 回答
1

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

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

再三考虑我会给出代码然后做解释。为了清楚起见，我包含了整个 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>

现在解释一下。

  1. 我没有使用 body 元素上的传统onload事件属性在页面加载时运行脚本（如您所愿），而是将带有事件的事件处理程序附加load到windowDOM 元素。事件处理程序更有用，因为它们有助于将 JavaScript 与 HTML 分开（以及许多其他原因）。您可以在此处阅读有关事件处理程序的更多信息：https ://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

  2. 在函数selectItems()中，我将所有变量放在一个声明中以保持代码干净。

    3. 为了避免数组的潜在问题，我stringArray改为调用变量。array是 JavaScript 中的保留字，可能会导致某些浏览器出现问题，尽管我不完全确定哪些浏览器（如果有）。

  3. 总是，总是，总是使用，===而不是==。这样你就可以确定比较是严格和正确的（即被比较的两个东西都是相同的类型，在这种情况下：字符串）。

  4. 最好通过使用强制在严格模式下处理 JavaScript 函数'use strict;'。这样，如果浏览器检测到不允许的内容，它将停止（并抛出异常），从而允许您编写更好的 JavaScript 代码。

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

于 2012-11-20T07:12:29.053 回答