如何删除下拉列表中生成的数组中的空白行

Question

我有一个使用 javascript 和 html 生成的下拉菜单。我有一些代码将在下面发布，这些代码循环遍历此列表，并且可能会删除找到但不起作用的任何空白行。 "$maxfield1rows" 的值为 7，我的意思是如果该值为空白 (=='')，则将其删除。我使用了 removeChild 但这似乎不起作用，我也尝试过拼接，我认为过滤器可以工作但不确定。我尝试了 disabled=true 但这只会使它们被禁用且无法选择。有人可以帮忙吗？

for(index=1; index<$maxfield1rows; index++) {
  if(document.pickDivision.field1.options[index].value=='') {    
document.pickDivision.field1.removeChild(document.pickDivision.field1.options[index]);
  }
}

在下面更新，我使用 $maxfield1rows 因为这是循环通过的最大行数，也通过更改我的意思是当用户选择不同的选项时触发 onchange 事件下拉菜单，因此根据选择的选项，field1 的输出会发生变化，有时会显示 5 个值，有时只有 1 个：

for(index=$maxfield1rows-1; index>=0; index--) {
    alert(document.pickDivision.field1.options[index]);
    if(document.pickDivision.field1.options[index].value==''){
        document.pickDivision.field1.removeChild(document.pickDivision.field1.options[index]);             
        document.pickDivision.field1.options[index].disabled=true;
    }
    else{
        document.pickDivision.field1.options[index].disabled=false;
    }
}

Answer 1

为了扩展我的评论，我认为问题在于您正在通过选项数组向前循环。我很惊讶当您尝试执行此操作时没有引发错误。您应该在集合中向后循环以避免跳过一个项目。

JS Fiddle demonstrating the error。在示例中，第 1 项和第 2 项为空白，第 3 项不是。

每次添加/删除项目时，这些内置集合都会更改。使用小提琴中的示例，我的数组从[1,2,3] 变为[2,3] 变为error no item at index 2。

向后循环，我的收藏采用了这种变化：[1,2,3] 到 [1,3] 到 [3]。

这是带有 cmets 的代码，解释了 for 循环的每个部分的用途和原因。如果您愿意，也可以使用 while 循环。

//options.length - 1 because arrays are 0 based
//i >= 0 because you don't want to use a negative index on an array
//i-- to loop backwards
for(var i = document.pickDivision.field1.options.length - 1; i >= 0; i--) {
    //Is this an empty item
    if(document.pickDivision.field1.options[i].value == '') {
        //Remove the empty item
        document.pickDivision.field1.removeChild(document.pickDivision.field1.options[i]);
    }
}

更新

使用您发布的新更新代码，您正在尝试访问删除后的选项元素。从该行的外观来看，您不再需要它，因为您已经删除了该元素。如果您仍想在移除之前禁用该元素，请将该行移到另一行上方（参见代码中的注释）。

for(index=$maxfield1rows-1; index>=0; index--) {
    alert(document.pickDivision.field1.options[index]);
    if(document.pickDivision.field1.options[index].value==''){
        document.pickDivision.field1.removeChild(document.pickDivision.field1.options[index]);             
        //This line is causing the issue; move it above the previous line or remove it
        document.pickDivision.field1.options[index].disabled=true;
    }
    else{
        document.pickDivision.field1.options[index].disabled=false;
    }
}

更新 2

根据 cmets 中的问题，当您将选项数更改为 6 时，您的代码会中断。这是因为您使用的是硬编码的 PHP 值 $maxfield1rows。由于您已经知道表单的名称和表单中的字段名称，因此我建议您在 for 循环中使用选项集合的长度，而不是这个变量。这将确保无论有多少选项元素（1、10、1000），您都将始终循环遍历整个集合。

for(var i = document.pickDivision.field1.options.length - 1; i >= 0; i--) {