Need way to hide empty select options

Design help Custom code
1

I am dynamically populating the dropdown on the page linked to below. The issue is, that when there are no 3rd and 4th ‘METAL & GEMSTONE SELECTION’ options, for example, I need to hide the empty select options. How many variables are in the dropdown will depend on the product so it must hide them dynamically based on which ones are empty.

Staging:
http://cerimani-new.webflow.io/our-collection/bolle-dream-droplet-gem-necklace

Read-only:
https://preview.webflow.com/preview/cerimani-new?preview=e42b4d605338c06b9dc44c905a1a2942

2

Hi @outerwhitespace

I’m definitely not sure about the following code but you can try :slight_smile:

<script>
jQuery.fn.toggleOption = function( show ) {
        jQuery( this ).toggle( show );
        if( show ) {
            if( jQuery( this ).parent( 'span.toggleOption' ).length )
                jQuery( this ).unwrap( );
        } else {
            if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
                jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
        }
    };
</script>
3

Thanks for the response, but sadly that did not work.

4

Sorry…:confused:

Did you add this script inside your “control-group” embed widget ?

Did you try to wrap your option values texts in spans ?

5

lol, I didn’t but I just did after you asked :smiley: And also tried adding before and then after. I’m not JS savvy soooo, yeah. Haven’t tried wrapping text in spans … will look into that now.

6

I tried the following to no avail :-/

<script>
$('.dropdown-option span:empty').parent().hide()
</script>
7

Omg, I’m an idiot, I forgot about ‘:empty’ … the following code worked, yay!

option:empty {
   display: none;
}
8

Great job @outerwhitespace ! This could be very useful :slight_smile:

1 Like
9

So there are issues with the option:empty selector on mobile and PC browsers. Will update if I find a solution.

10

Days later I found a solution since the previous solution wasn’t working on mobile and various browsers.

$(function() {
  $(".cd-select option").filter(function(){
      return $.trim($(this).text()) ==  ''
  }).remove();
});
1 Like