如何刪除下拉列表中生成的數組中的空白行

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

為了擴展我的意見，我認為問題在於您正在遍歷options數組。 我很驚訝在嘗試執行此操作時未拋出任何錯誤。 您應該在集合中向后循環，以免跳過項目。

JS Fiddle演示了該錯誤 。 在示例中，項目1和2為空白，項目3為空白。

每次添加/刪除項目時，這些內置收藏集都會更改。 使用小提琴中的示例，我的數組從[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]);
    }
}

UPDATE

使用您發布的新更新的代碼，您試圖在刪除選項元素后對其進行訪問。 從外觀上看，您已經不再需要該元素，因此不再需要它。 如果仍要在刪除元素之前禁用該元素，則將該行移到另一行上方（請參見代碼中的注釋）。

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循環中使用options集合的長度，而不要使用此變量。 這樣可以確保無論有多少選項元素（1、10、1000），您都將始終循環遍歷整個集合。

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