Show all select box options that don't contain the value hello_

Question

So I want to be able to hide all the options and then show only the ones that don't include hello_ in their value. This includes hello_bye, hello_hello etc. Anything that starts with hello_

This is what I have so far:

jQuery(document).ready(function(){
    jQuery("#metakeyselect > option").hide();
    jQuery("#metakeyselect > option[//what goes here?//]").show();
});

How do I show everything BUT options with values including hello_?

By "value" you mean the `value` attribute or the text content of the option element? — Felix Kling, Jun 21 '13 at 21:43
@Zenith Because I only pasted part of the problem. I'm actually fooling around with WordPress's core in my theme — bigpotato, Jun 21 '13 at 21:58

score 4 · Accepted Answer · edited May 23 '17 at 10:32

4

You can "hide" the ones whose value start with hello_ using the attribute-starts-with selector.

As Alex pointed out correctly, not all browsers let you hide option elements though (see also How to hide optgroup/option elements?). But you can remove them:

var hidden_options = jQuery("#metakeyselect > option[value^=hello_]").remove();

or disable them:

jQuery("#metakeyselect > option[value^=hello_]").prop('disabled', true);

depending on what else you want to do with them.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 21 '13 at 21:45

Felix Kling

795,719
175
1,089
1,143

so does this work like a regex where anything that starts with `hello_` will be removed? – bigpotato Jun 21 '13 at 21:53
@Edmund: Every option element whose value attribute starts with `hello_` will be removed, yes. – Felix Kling Jun 21 '13 at 21:54

score 3 · Answer 2 · answered Jun 21 '13 at 21:43

3

http://api.jquery.com/contains-selector/

Elements that contain hello_:

$("#metakeyselect > option:contains('hello_')")

Elements that do not contain hello_:

$("#metakeyselect > option:not(:contains('hello_'))")

answered Jun 21 '13 at 21:43

000

26,951
10
71
101

2

this won't check that condition: "Anything that starts" – A. Wolff Jun 21 '13 at 21:49

score 0 · Answer 3 · answered Jun 21 '13 at 22:22

You can use:

$(document).ready(function(){
    var options = $('#metakeyselect > option');
    var contains = "hello_";

    options.each(function() {
        if($(this).val().indexOf(contains) != -1){
            $(this).remove();
        }
    });
});

OR

$(document).ready(function(){
    $("#metakeyselect > option").remove();
    $("#metakeyselect > option[value*='hello_']").show();
});

You will need to use remove() for options.

Show all select box options that don't contain the value hello_

3 Answers3