Question

我是一个使用Javascript的新手，并被提出这种问题。我必须获取PHP目录中的所有文件，然后必须在两个HTML <select>列表中列出这些文件。第一个包含我在目录中找到的文件的扩展名，而第二个包含完整的文件名。当我选择扩展名（第一个选择中具有onchange）时，必须从第二个<select>中删除所有不具有该扩展名的文件。事情应该像这样工作：我选择“ jpg”，所有不是.jpg文件的文件都必须从第二个选择中删除。我做了一个功能来管理这个，但是它并不能正常工作。在这里，我发布了我编写的代码：

echo("function visible_selection(){
    var ext = document.getElementById(\"ext\");
    var slen = document.getElementById(\"files\").length;
    var selected = ext.options[ext.selectedIndex].text;
    var filez = document.getElementById(\"files\");
    for(var i=0; i < slen; i++){
        var vdump = filez.options[i].text;
        var xcase = vdump.split(\".\");
        if (!vdump.includes(selected) && xcase[1] != selected){
            filez.remove(i);
        }
    }
    filez.style.display = \"inline\";
}");

ext显然是包含扩展名的第一个<select>，而文件是包含完整文件名的第二个。我的问题是，如何正确检查扩展名是否包含在文件名中，从而删除没有这种扩展名的文件？

Answer 1

-编辑。对@David表示歉意。我念念名字。谢谢您的帮助。

感谢@CBCrusher分解了调试问题的步骤。

随着OP将问题缩小到for循环，我将提供一个可行的示例。

您当前正在从0->长度循环遍历数组。但是，您要删除循环中的元素，这将更改数组的长度（使您越界错误）。诀窍是向后遍历数组。

function visible_selection() {
  var ext = document.getElementById("ext");
  var slen = document.getElementById("files").length;
  var selected = ext.options[ext.selectedIndex].text;
  var filez = document.getElementById("files");

  for (var i = slen - 1; i >= 0; i--) {
    var vdump = filez.options[i].text;
    var xcase = vdump.split(".");
    if (!vdump.includes(selected) && xcase[1] != selected) {
      filez.remove(i);
    }
  }
  filez.style.display = "inline";
}

document.getElementById("ext").onchange = () => {
  visible_selection()
}

<label for="ext">Extentions:</label>

<select id="ext">
  <option disabled selected value> -- select an extention -- </option>
  <option value=".jpeg">.jpeg</option>
  <option value=".png">.png</option>
  <option value=".pdf">.pdf</option>
</select>


<label for="files">Files:</label>

<select id="files">
  <option disabled selected value> -- all files -- </option>
  <option value="File1.jpeg">File1.jpeg</option>
  <option value="Fiel2.jpeg">Fiel2.jpeg</option>
  <option value="Fiel3.png">Fiel3.png</option>
  <option value="Fiel4.pdf">Fiel4.pdf</option>
  <option value="Fiel5.pdf">Fiel5.pdf</option>
</select>

检查两个HTML <select>之间的字符串的最有效方法？

1 个答案: