adblock - block one option from select list

Question

I can't find a way to block one option from select list.

For example I have on page:

 <select name="test_select">
   <option value="1">Something I don't need</option>
   <option value="2">Something I still need</option>
 </select>

I use filter ##option[value="1"]

So.. seems that filter don't block initial state of select. After page loaded default value "I don't need" still displayed.

When I'm trying to select another option(s) - the first option disappear from the list which is fine, but still problem for me that initially unneeded option shown after page loaded.

Is there a way to block(remove) this option completely?

Answer 1

The filter works as expected because it's supposed to hide the <option> element, not the <select> element. If you want to hide the <select> element but only if it has a certain value, you'd need to wait for parent selectors to (hopefully) arrive with CSS4. Those would allow you to write the filter as

##!select > option[value="1"]:checked (based on the syntax in the W3C working draft) ##select:has(> option[value="1"]:checked) (based on the syntax in the CSSWG editor's draft)