logo标签列表

如何使用JavaScript设置多选下拉框中的选定选项

javascript
5

好的，这个问题肯定已经被问过了，我实际上能够在jQuery中找到我的问题的答案，但是当我试图实现答案时，我无法使其工作。我宁愿用java-script来完成它.....

我正在从数据库中读取由逗号分隔的文本字符串，并希望将其翻译为多选框中的选定选项。

到目前为止，我一直在尝试让浏览器在单击按钮时选择与硬编码字符串匹配的单个选项，但我甚至不能让它起作用。但是我想既然我在问问题，我可能会把整个脚本写出来，这样你就可以看到所有内容，也许可以发现其他问题......最后，我如何使它在页面加载时运行？如果这是冗余和基础知识，那我很抱歉，但我对JS非常陌生，发现现有的问题的答案没有什么帮助。提前致谢。

编辑

所以，我发现如果我使用“select.options [i] .value = true”（布尔值而不是字符串）可以使赋值工作，根据Asad的答案。但是，我正在使用Harvest的Chosen多选控件：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。 - RobG
2个回答
2
你的第一个for循环有两个语法错误。尝试在你的浏览器控制台中检查。
for(count=0, count<array.length, count++) {

should be:

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

请注意，在count=0和count<array.length部分之后，逗号被更改为分号。
此外，您可能希望使用for(var count=0和for(var i=0，以便count和i变量不是全局声明的。
1
@Caderade 没问题。正如我在另一个已删除的答案中指出的那样，如果你在解决了 for 循环问题后使用 $("#multiselectid").trigger("liszt:updated");，它应该会重新生成所选控件中的项目。 - Ian
1
天哪！感谢Ian！我不知道你是怎么这么快就搞定了，但它确实解决了问题！非常感谢！我一直想知道发生了什么事导致其他答案和评论被删除。但是，很快，我该怎样让它在页面加载时运行呢？只需要将脚本放在body结束的位置吗？因为那好像行不通…… - Caderade
1
通过JFiddle，我注意到它正在使用多选的索引，有没有可能有一个Jquery的'Indexof'等效物，这样我就可以输入选项的值而不是索引了？因为再次，我正在将选项的值与来自数据库的字符串数组匹配，所以此时我不知道索引是什么。虽然我想我可以编写另一个脚本来完成这个任务。 - Caderade
1
太好了，我很感激！我不知道是否适合添加更多的评论（我是在三小时前才加入stackoverflow的），但我不知道如何私信您，而且看起来我的声望还不足以将其移到聊天或提高您的声望。我很惊讶我能发出一个问题。总之，使用您的“$（document）.ready”技巧，脚本可以在页面加载时运行，而我只能使用这个技巧是因为我已经在使用chosen控件。再次感谢。 - Caderade
1
太搞笑了。太好了，我真的很感激！说实话（不要因为这个评判我），我不明白为什么那个JQuery会起作用哈哈，但只要浏览器能理解就行了，我想这才是最重要的。你今天帮了我很多忙，如果我能给你投票，我真的会的。保持真实。 - Caderade
显示剩余5条评论
1

好的，我会在我的回答中尝试回答你问题的所有部分。

正如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>

现在开始解释。

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

  • 在函数selectItems()中，我将所有变量放在一个声明中，以保持代码整洁。

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

  • 始终、始终、始终使用===而不是==。这样你就可以确保比较是严格和正确的（即被比较的两个东西是相同类型的，在这种情况下是字符串）。

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

    • 希望这有所帮助，如果您仍然感到困惑，请随时提出更多问题！
    1
    1. 我不确定如何使用 addEventListener 比 .onclick 更有助于将 Javascript 与 HTML 分离。
    2. 一个声明并不一定更清晰，特别是当你把它写成一行时。
    3. "array" 不是保留字..."Array" 才是...Javascript 是大小写敏感的。
    4. === 并不总是正确的选择 - 这是一个完美的例子，因为有些人可能不确定 .value 返回的是什么（它始终是一个字符串）或者 .split，但如果你要比较它们，没有理由不使用 ==。
     - Ian
    1. 最初，OP想要“用JavaScript[sic]”完成这个任务，因此在这种情况下，addEventListener将是onload的替代方法。但是，使用jQuery时，$(document).ready( function() { ... });已经将JavaScript与HTML分离开来。
    2. 您可以将其放在多行中，但在我看来，一个声明更加清晰。
    3. 我改正了。
    4. ===是正确的选择。由于.val()和.value返回字符串，因此您应该将其与字符串进行比较。
     - rink.attendant.6
    @rink.attendant.6 - 感谢您的帖子 - 变量声明部分确实更加简洁，将字符串作为函数参数并在内部进行拆分也非常合理。我之所以要求使用JS是因为它对我来说更容易理解...Jquery对我来说太陌生了。虽然我必须说，最终还是使用了Ian的$(document).ready想法，因为我已经在使用它了（我甚至没有意识到）。再次感谢您的帮助，我还是个新手。 - Caderade
    @rink.attendant.6 1. 真的，但是“将JavaScript与HTML分离”的区别并不大-它们都以相同的方式执行...尽管我同意addEventListener是绑定事件的更好选择。2. 如何声明存在很多争议，但我喜欢的另一个选项是使用一个var语句，但在每个“，”后面放置一个换行符，以便可以轻松查看和对齐各个变量。3. 只是想指出这一点。4. 如果您知道正在比较字符串，则===和==之间没有区别。不是要挑剔。 - Ian
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接