javascript - 如何删除生成的数组中显示在下拉列表中的空白行

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 项不是空白。

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

向后循环，我的集合进行了以下更改:[1,2,3] 到 [1,3] 到 [3] .

下面是带有注释的代码，解释了 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

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

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