Removing options from select based on text

RoyMcKenzie · 04-13-2011, 08:44 PM

I have this bit of javascript:

Code:

selectBox = document.getElementById("IndexDropdown");
badVar = "ORAL";


for (i=0; i<selectBox.options.length; i++) {
  if (selectBox.options[i].text.search(badVar) != -1)  {
	selectBox.options[i] = null;
  }
}

affecting this element:

Code:

<select onchange="SetPlayerPosition(this.options[this.selectedIndex].value,this)" style="width:100%" id="IndexDropdown">
<option value="0:4595">16.	Oral Report on State and Local Redistricting Proposals.</option>
<option value="0:5546">17.	Consideration of the Monthly Financial Report for the Period Ending February 28, 2011 (Staff Presentation.)</option>
<option value="0:10727">ORAL REPORTS BY MEMBERS OF CITY COUNCIL</option>
<option value="0:10729">ORAL PRESENTATIONS BY MEMBERS OF CITY COUNCIL</option>
<option value="0:11427">ORAL REPORT FROM THE CITY MANAGER</option>
<option value="0:15058">26.	Consideration of City Council Schedule.</option>
</select>

The code works to remove all options that include "ORAL" (case-sensitive) except for the last option that includes that string. I want it to remove ALL references. What am I doing wrong? When I run it twice it works, but that's not right.

pussard · 04-15-2011, 04:53 AM

This is because your loop changes as you remove the nodes (i.e. selectBox.options indicies changed as soon as the first node was removed). You have to put all your deleted nodes into an array and then loop through that like this:

selectBox = document.getElementById("IndexDropdown");
deletedNodes = [];
selectBoxLength = selectBox.options.length;
badVar = "ORAL";
for (i = 0; i < selectBoxLength; i++) {

if ( /ORAL/.test(selectBox.options[i].innerHTML) ) {
deletedNodes.push(selectBox.options[i]);
}
}
for (i = 0; i < deletedNodes.length; i++) {
selectBox.removeChild(deletedNodes[i]);
}

bullant · 04-15-2011, 05:34 AM

Another option is to loop through the options starting from the last one and working back to the first option.

Then delete each option that contains badVar apart from the first occurence which will be the last option with badVar in it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
        function SetPlayerPosition(obj){
            var count = 0;
            var badVar = 'ORAL';
            for(i=obj.length-1; i >=0; i--){
                if(obj.options[i].innerHTML.indexOf(badVar) != -1 && ++count > 1){obj.options[i] = null;}
            }
        }
    </script>
    </head>
    <body>
        <select onchange="SetPlayerPosition(this)" style="width:100%" id="IndexDropdown">
            <option value="0:4595">16.    Oral Report on State and Local Redistricting Proposals.</option>
            <option value="0:5546">17.    Consideration of the Monthly Financial Report for the Period Ending February 28, 2011 (Staff Presentation.)</option>
            <option value="0:10727">ORAL REPORTS BY MEMBERS OF CITY COUNCIL</option>
            <option value="0:10729">ORAL PRESENTATIONS BY MEMBERS OF CITY COUNCIL</option>
            <option value="0:11427">ORAL REPORT FROM THE CITY MANAGER</option>
            <option value="0:15058">26.    Consideration of City Council Schedule.</option>
        </select>
    </body>
</html>

Dormilich · 04-15-2011, 09:16 AM

Quote:

Originally Posted by bullant

Another option is to loop through the options starting from the last one and working back to the first option.

some other variants of that "downloop".

using while()

PHP Code:


			
var i = list.length;
while (i--) {
    doSomethingWith(list[i]);
}

of course you can also code that as for()

PHP Code:


			
for (var i = list.length; i--;) {
    doSomethingWith(list[i]);
}

Kor · 04-15-2011, 09:19 AM

You must remove the option using a backwards loop, in which case the length of the collection is irrelevant, as it will not affect the next element to be removed in a series.

Code:

for (var i=selectBox.options.length-1; i>=0; i--) {
  if (selectBox.options[i].text.search(badVar) != -1)  {
	selectBox.options[i] = null;
  }
}

bullant · 04-15-2011, 09:41 AM

@op

I misread your initial post.

I've removed the counter from my initial post

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
        function SetPlayerPosition(obj){
            var badVar = 'ORAL';
            for(i=obj.length-1; i >=0; i--){
                if(obj.options[i].innerHTML.indexOf(badVar) != -1){obj.options[i] = null;}
            }
        }
    </script>
    </head>
    <body>
        <select onchange="SetPlayerPosition(this)" style="width:100%" id="IndexDropdown">
            <option value="0:4595">16.    Oral Report on State and Local Redistricting Proposals.</option>
            <option value="0:5546">17.    Consideration of the Monthly Financial Report for the Period Ending February 28, 2011 (Staff Presentation.)</option>
            <option value="0:10727">ORAL REPORTS BY MEMBERS OF CITY COUNCIL</option>
            <option value="0:10729">ORAL PRESENTATIONS BY MEMBERS OF CITY COUNCIL</option>
            <option value="0:11427">ORAL REPORT FROM THE CITY MANAGER</option>
            <option value="0:15058">26.    Consideration of City Council Schedule.</option>
        </select>
    </body>
</html>