On page load I am trying to unhide multiple dropdowns in a div if any of the dropdowns have an option selected

Question

I have five hidden drop-downs in a div that are dynamically populated with an option selected if required by the data.

I need to display the drop-downs that have an option selected but not if the value is 0.

My code tried so far:

$('.sendingCriteria').each(function () {
    $(':selected', this).each(function (e) {
        let $this = $(this);
        if ($this.value() != 0) {
            $(this).css('display', 'block');
        }
    });
});

The CSS:

.timeOfDay,.dayOfWeek,.dayOfMonth,.mnthOfYr{
    display: none;
}

.freqSelectors{
    display:none;
}

The HTML:


    
        
        
            
                
            
        
        
            
                Frequency
                
            
            
                Time of Day
                
            
            
                Day of the Week
                
            
            
                Day of the Month
                
            
            
                Month of the Year
                
            
        
    
    Choose the frequency for generating this notificaton

user_6089612 · Answer

As I understand it, you're trying to show/hide individual select elements, but your CSS hides div.freqSelectors which contains all of them. That means showing an individual select will have no effect, because the parent div is still hidden. So let's remove that CSS.

Next, your code is trying to iterate over $(':selected', this). But in this context, the this you reference is .sendingCriteria, which is a div. That will have no selected elements, so that will never match anything.

Instead, let's keep it simple - just iterate over each select in this container. We can find those using .find(), which will search down the DOM for matching elements.

We test each value, same as your code, but since it is the div containing the select that is hidden, we need to target that to unhide it, not the select itself. We can use .closest() to do that, it will search back up the DOM to find the closest matching element.

Note your code is iterating over every .sendingCriteria on the page. Are there really more than 1? If not, you can remove that entire loop, and just find the selects inside that element, like:

let $selects = $('.sendingCriteria').find('select');

Working snippet below (with much simplified HTML - we can demonstrate the functionality with a minimal subset of the HTML you included).

$('.sendingCriteria').each(function () {
    let $selects = $(this).find('select');
    $selects.each(function() {
        if ($(this).val() != 0) {
            $(this).closest('div').css('display', 'block');
        }
    });
});

.timeOfDay,.dayOfWeek,.dayOfMonth,.mnthOfYr{
    display: none;
}



    
        
            Frequency
            
        
        
            Time of Day
            
        
        
            Day of the Week

On page load I am trying to unhide multiple dropdowns in a div if any of the dropdowns have an option selected

1 Answers