show all posts on page load - jQuery dropdown.

Check this snippet code below

$(document).ready(function() {
    
  $("#selectMe
option[value=all-future]").attr('selected', 'selected');
   
});

Select allOpen in new window

still not showing, using that snippet.

noted. you can call out change() function afterward.

Here is the changes

jQuery(document).ready(function($) {

$("#selectMe option[value=all-future]").attr('selected', 'selected');
$("#selectMe").change();
 
});

Select allOpen in new window

your code already fire the "change" event at page load, so maybe it's a typo issue here : buisness-future
instead : business-future

a shortcut of your code if you can't change classes name to match options values :

<script>
    jQuery(function($) {
        $("#selectMe").change(function() {
            var optionsToClasses = {
                "all-future": ".all-future",
                "business-management": ".buisness-future",
                "financials": ".financial-future",
                "project-management": ".project-future",
                "sales-marketing", ".sales-future",
                "virtual-training": ".virtual-future"
            }
            $(".tabbed-content").hide();
            $("option:selected", this).each(function(){
                $(optionsToClasses[$(this).val()]).show();
            });
        }).change();
    });
</script>

Select allOpen in new window

Just in case you missed what I was saying in my post here is a sample that uses the code I posted above.

https://www.marcorpsa.com/ee/t3931.html

The code uses the method of setting the selected value on page load (this could be done by adding the 'selected' attribute to the <option>

<option value="all-future" selected>Topic</option>

Select allOpen in new window

It shows the all-future content on load (again this could have been done on page render by defaulting the .all-future tabbed content to a visible state.

Finally it demonstrates the shortened version of the change code to work generically (without adding any more classes than you have already) to hide the visible content and show the selected.
Note - you don't have to specifically .not() the selected tab - you can hide everything and then show selected.

Hi guys,  I thought this was working, but it's starting to not show on page load again, and then refreshing messes things up.

Here is my staging site - staging site

So i have 2 drop downs,  top one will show future webinars,  bottom one will show past webinars.

Here is the jQuery i've been using.  I think i've tried each solution here, and i get the same problems.

/* -- Future Webinars --*/
jQuery(document).ready(function($) {
$("#selectMe option[value=all-future]").attr('selected', 'selected');
        $("#selectMe").change();
         
        });
jQuery(document).ready(function($) {
     $("#selectMe").change(function() {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="all-future"){
                $(".tabbed-content").not(".all-future").hide();
                $(".all-future").show();
            }else if($(this).attr("value")=="business-management"){
                $(".tabbed-content").not(".business-future").hide();
                $(".business-future").show();
            }else if($(this).attr("value")=="financials"){
                $(".tabbed-content").not(".financial-future").hide();
                $(".financial-future").show();
            }else if($(this).attr("value")=="project-management"){
                $(".tabbed-content").not(".project-future").hide();
                $(".project-future").show();
            }else if($(this).attr("value")=="sales-marketing"){
                $(".tabbed-content").not(".sales-future").hide();
                $(".sales-future").show();
            }else if($(this).attr("value")=="virtual-training"){
                $(".tabbed-content").not(".virtual-future").hide();
                $(".virtual-future").show();
            }else{
                $(".tabbed-content").hide();
            }
        });
    }).change();
});


/* -- Past webinars -- */
jQuery(document).ready(function($) {
    $("#selectMePast option[value=all-past]").attr('selected', 'selected');
            $("#selectMePast").change();
             
            });
jQuery(document).ready(function($) {
    $("#selectMePast").change(function() {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="all-past"){
                $(".tabbed-content").not(".all-past").hide();
                $(".all-past").show();
            }else if($(this).attr("value")=="business-management"){
                $(".tabbed-content").not(".business-past").hide();
                $(".business-past").show();
            }else if($(this).attr("value")=="financials"){
                $(".tabbed-content").not(".financial-past").hide();
                $(".financial-past").show();
            }else if($(this).attr("value")=="project-management"){
                $(".tabbed-content").not(".project-past").hide();
                $(".project-past").show();
            }else if($(this).attr("value")=="sales-marketing"){
                $(".tabbed-content").not(".sales-past").hide();
                $(".sales-past").show();
            }else if($(this).attr("value")=="virtual-training"){
                $(".tabbed-content").not(".virtual-past").hide();
                $(".virtual-past").show();
            }else{
                $(".tabbed-content").hide();
            }
        });
    }).change();
});

Select allOpen in new window

Hey Julian,

So i followed what you did on that test site, and i do get it to show on page load, but when i select another option from the dropdown, they all stay as display:none ?

/* -- Future Webinars --*/
jQuery(function($) {
    $(function() {
        const selectMe = document.getElementById('selectMe');
     
        // Select default value (although this could have been done by 
        // adding the selected attribute to the 'all-future' option above)
        selectMe.value = 'all-future';
     
        // Just show it on page load
        $(".all-future").show();
     
       $("#selectMe").change(function() {
          // Get the selected value
          const val = this.value;
     
          // Hide all 
          $('.tabbed-content').hide();
     
          // If a value is selected then show it
          if (val) {
            $('.' + val).show();
          }
       })
    });
});

Select allOpen in new window

here a shortcut for both :

<script>
    jQuery(function($) {
        const handler = function() {
            var optionsToClasses = {
                "all-future": ".all-future",
                "business-management": ".buisness-future",
                "financials": ".financial-future",
                "project-management": ".project-future",
                "sales-marketing", ".sales-future",
                "virtual-training": ".virtual-future"
            }
            $(".tabbed-content").hide();
            $("select[id^='selectMe'] option:selected").each(function() {
                    $(optionsToClasses[$(this).val()]).show();
            })
        }
        $("select[id^='selectMe']").change(handler);
        handler(); // run it at page load
    });
</script>

Select allOpen in new window

leakim971 - thank you.  I'm using your code - staging website
But it still wont show on page load.  Not sure what i am doing wrong?  

the code is actually never called because you've JavaScript error in the page before

I commented that function out.  

still have at least 6 JS errors
+2 404 errors

you can set a "debugger" keyword before your code so you know it should stop there if its going to be executed

debugger; 
alert("reached");// or use an alert
jQuery(document).ready(f..

Select allOpen in new window