Delete options based on substring value 1

[Lori713]

Howdy,
I'm trying to delete options based on a substring of their value but my code will only delete the first option and no others even though they match the substring.

The list in the select box will be dynamic so I can't always say "delete the first three options." I can control the value of the prog2 box so I'm making the first two characters be something I can use to determine what to delete.

Any ideas what I'm missing in getting the function to match to the other AO options so they can be deleted? Thanks! Lori

HTML:

<td><label for="prog2" name="prog1" id="prog1">Program Code:</label></br>
  <select name="prog2" id="prog2" multiple size="5">
  <option value="ALL" selected="selected">ALL</option>
  <option value="A0101">A0 - 101 - Regular Term Instruction</option>
  <option value="A0102">A0 - 102 - Summer Term Instruction</option>
  <option value="A0103">A0 - 103 - Extension Instruction/Non-Cred</option>
  <option value="D0101">D0 - 101 - Regular Term Instruction</option>
  <option value="D0110">D0 - 110 - Organized Research</option>
  <option value="D0121">D0 - 121 - Administration</option>
  <option value="M0990">M0 - 990 - Multi-activity</option>
  <option value="L0110">L0 - 110 - Organized Research</option>
  <option value="L0152">L0 - 152 - General Academic Support</option>
  <option value="L0230">L0 - 230 - Student Financial Aid</option>
  <option value="L0990">L0 - 990 - Multi-activity</option>
    </select></td>

Javascript:

function updateProgList()
{
var progElement = document.getElementsByTagName('select')['prog2'];

// AO is hard-coded for now; later it will be read in from another 
// select box to determine which values to delete from this box.

for ( var i = 0; i < progElement.length; i++ )
    { if ( progElement[i].value.substring(0,2) == 'A0' )
         { progElement.removeChild(progElement[i]);
         }
    }
}

 

[kaht]

but my code will only delete the first option and no others

That's not true. Your code will delete options 101 and 103, but it skips 102. There is an easy explanation of why it does this.

You have defined your for loop to go from 0 - length of the select box. In the code above, your function will find a match to "ao" at element #2 (when i = 1). When this happens, that element is removed from the select box. However, in the process it makes element #3 the new element #2. So, when your for loop increments to look at the next element, it looks at element #3 (when i = 2). Before the previous element was removed from the select box, option ao-102 was element #3. However, when option ao-101 was removed option ao-102 is now element #3. The for loop never goes back and looks at the new element #2 (when i = 1), so that element is never removed (unless the function runs a 2nd time, at which point it will get removed).

The logical problem here is that you are a using a for loop when you shouldn't be. A while loop would be much more appropriate for this task:

function updateProgList() {
   var progElement = document.getElementsByTagName('select')['prog2'];
   var i = 0;
   while (i < progElement.length) {
      if (progElement[i].value.substr(0, 2) == "A0") {
         progElement.removeChild(progElement[i]);
      }
      else {
         i++;
      }
   }
}

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[dwarfthrower]

Removes the first option, or the first option that matches the substring "A0"?

I'm betting on the latter here... When you remove the first matching element, you shift the other two matching elements back one position in the array of options, then [tt]i[/tt] gets incremented and you skip a couple of options.

If you work backwards from [tt]progElement.length[/tt] to [tt]0[/tt], then when you remove an element, you're only messing up the indexing (as far as this routine goes) for options that you have already processed.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

 

[kaht]

dwarfthrower brings up a good point - if you looped through the array backwards then a for loop would have been perfectly suitable.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[Lori713]

Thank you, kaht and dwarfthrower, for taking the time to not only answer my question but to explain <b>why</b> my code wasn't working. I am still struggling to gain some mastery over Javascript and the explanations help me learn more about it. I appreciate it very much!