Javascript for removing options from dropdown list

Question

I have dropdownlist with following html code that I grabbed from debug window. It is a code in blackbox that I can't get to. In this webpage I want to use javascript to remove the options if it does not start with 'SS '. How do I do that?

<select id="prgid" special="lists.specprog" name="UF-003054-1">
<option value=""> </option>
<option value="5488">SS Twain CE</option>
<option value="5487">Twain IS</option>
</Select>

I am doing something like this which is not working. Please help.

var select=document.getElementById('prgid');
            for (i=0;i<select.length;  i++) {
                var prg = select.options[i].value;
                if (!prg.substring,0,3) == 'SS ') { 
                 select.remove(i);
               }
            }

Answer 1

You had the right idea. Try this:

var select = document.getElementById('prgid');
for (var i in select.children) {
    if (select.children[i].innerHTML.match('SS') !== 0) {
        select.children[i].outerHTML = '';
    }
}

http://jsfiddle.net/howderek/35vagg9u/

Answer 2

You're close, you just missed a couple things

var prg = select.options[i].value;
//should be
var prg = select.options[i].text;

Should use .text, because .value will return 5488 and 5487, .text will return "SS Twain CE" And "Twain IS"

And your substring method wasn't formatted correctly, it should have been

if (prg.substring(0, 3) != 'SS ')

Putting it all together

var select=document.getElementById('prgid');
for (i=0;i<select.length;  i++) {
    var prg = select.options[i].text;
    if (prg.substring(0, 3) != 'SS ') { 
       select.remove(i);
    }
}

Answer 3

var select=document.getElementById('prgid');
for (i=0;i<select.length;  i++) {
    var prg = select.options[i].text;
    if (prg.substring(0,3) == 'SS ') { 
        select.remove(i);
    }        
}

Use the above javascript. you have to use select.options[i].text to get option text. But if you use .value that will give you the option value. And see the syntax of .substring()

For code reference, see jsFiddle

Answer 4

Well, howderek already posted a good working alternative, but it may be worth posting a fixed version of your code for a better understanding of what went wrong. You were pretty close!

There were just a couple of missteps:

The condition within the if statement:

!prg.substring,0,3) == 'SS '

should instead have been:

prg.substring(0,3) != 'SS '

You were calling the substring() function incorrectly, and furthermore your placement of the ! operator would have caused you to compare a casted boolean against a string, rather than a string against a string (which is what you would want in this case).

Additionally, since you're actually accessing the text of the options, and not their values, you should use select.options[i].text; rather than select.options[i].value; .

Your resultant JavaScript would thus look like:

var select = document.getElementById('prgid');
for (i = 0; i < select.length; i++) {
    var prg = select.options[i].text;
    if (prg.substring(0, 3) != 'SS ') {
        select.remove(i);
    }
}

Here's a JSFiddle to demonstrate - note how all options that do not start with "SS " have been removed.

Hope this helps! Let me know if you have any questions.