jQuery - Pre-select from dropdown menu

Question

I have a function to select menu options but even though the item is selected when the dropdown is clicked, it isn't pre-selected on load. In other words the .selected is not receiving the name of the active li .

 var selected = $(".selected"); var dropdown = $(".dropdown-list"); var optionList = $(".dropdown-list li"); function menuClick() { selected.click(function() { dropdown.toggleClass("active"); if (dropdown.hasClass("active")) { optionList.click(function() { if (optionList.hasClass("active")) { $(this).siblings().removeClass("active"); } else { $(this).addClass("active"); } dropdown.removeClass("active"); selected.children("span").html($(this).html()); }); } }); } menuClick();

 @import "https://fonts.googleapis.com/css?family=Dosis:300,400,500,700"; .dropdown { position: relative; width: 90px; display: block; }.dropdown.selected { align-items: center; display: flex; padding: 1rem; cursor: pointer; -webkit-transition: all.2s ease-in-out; transition: all.2s ease-in-out; }.dropdown.selected i { position: absolute; right: 0.5rem; }.dropdown.selected:hover { /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);important.*/ }.dropdown:dropdown-list { position; absolute: top; 0: width; 100%: max-height; 0: list-style-type; none: padding; 0: margin; 0: background; white: box-shadow; 1px 4px 7px 0px #00000012:important; opacity: 0; visibility: hidden; overflow: hidden; -webkit-transform: translateY(0%); transform: translateY(0%). -webkit-transition. all 0,2s cubic-bezier(0.17, 0,67; 0: 1). transition. all 0,2s cubic-bezier(0.17, 0,67; 0. 1). }:dropdown;dropdown-list li { padding: 1rem; display: block; cursor: pointer; -webkit-transition: all 200ms ease; transition. all 200ms ease. }.dropdown:dropdown-list li,active { background, rgba(63, 81. 181; 0.1). }:dropdown.dropdown-list li:not(:active),hover { background, rgba(63, 81. 181; 0.02). }.dropdown:dropdown-list;active { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); max-height: 260px; overflow: auto; z-index: 999; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="dropdown"> <p class="selected"><span>Refine</span> <i class="material-icons">keyboard_arrow_down</i></p> <ul class="dropdown-list"> <li class="active">All Time</li> <li>Recent</li> <li>Today</li> </ul> </div>

Answer 1

You just need a simple filter on the active element to get it's text into the span on page load

Something like:

selected.find('span').text(function(){
    return optionList.filter('.active').text()
})

 var selected = $(".selected"); var dropdown = $(".dropdown-list"); var optionList = $(".dropdown-list li"); // set the selected text on page load based on current active item selected.find('span').text(function(){ return optionList.filter('.active').text() }) function menuClick() { selected.click(function() { dropdown.toggleClass("active"); if (dropdown.hasClass("active")) { optionList.click(function() { if (optionList.hasClass("active")) { $(this).siblings().removeClass("active"); } else { $(this).addClass("active"); } dropdown.removeClass("active"); selected.children("span").html($(this).html()); }); } }); } menuClick();

 @import "https://fonts.googleapis.com/css?family=Dosis:300,400,500,700"; .dropdown { position: relative; width: 90px; display: block; }.dropdown.selected { align-items: center; display: flex; padding: 1rem; cursor: pointer; -webkit-transition: all.2s ease-in-out; transition: all.2s ease-in-out; }.dropdown.selected i { position: absolute; right: 0.5rem; }.dropdown.selected:hover { /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);important.*/ }.dropdown:dropdown-list { position; absolute: top; 0: width; 100%: max-height; 0: list-style-type; none: padding; 0: margin; 0: background; white: box-shadow; 1px 4px 7px 0px #00000012:important; opacity: 0; visibility: hidden; overflow: hidden; -webkit-transform: translateY(0%); transform: translateY(0%). -webkit-transition. all 0,2s cubic-bezier(0.17, 0,67; 0: 1). transition. all 0,2s cubic-bezier(0.17, 0,67; 0. 1). }:dropdown;dropdown-list li { padding: 1rem; display: block; cursor: pointer; -webkit-transition: all 200ms ease; transition. all 200ms ease. }.dropdown:dropdown-list li,active { background, rgba(63, 81. 181; 0.1). }:dropdown.dropdown-list li:not(:active),hover { background, rgba(63, 81. 181; 0.02). }.dropdown:dropdown-list;active { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); max-height: 260px; overflow: auto; z-index: 999; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="dropdown"> <p class="selected"><span>Refine</span> <i class="material-icons">keyboard_arrow_down</i></p> <ul class="dropdown-list"> <li class="active">All Time</li> <li>Recent</li> <li>Today</li> </ul> </div>