How do I set the value of a UL-based dropdown list on page load from a variable in localStorage?

Question

I'm using a nifty UL-based dropdown list I found here (if it matters, it's specifically the third model) as the basis for a role-based selection box for my users. I don't want my users to have to select their role each time they visit, so any time they make a change I store their choice into localStorage.

I know how to recover the variable from storage, and I know how to use that variable to set a value for a select box, but I don't know how to update this UL-based dropdown list. Further, I don't know how to update the click event that's supposed to fire when the user makes a selection from the list.

The logic is:

1. Check if a specific localStorage object exists. If not, don't do anything and just wait for the user to interact with the dropdown.
2. Set the value of the dropdown list to the value of the localStorage object.

3. Activate the click function of the script, meaning:

   • Set the currently displayed text of the dropdown to what was stored in localStorage.
   • Filter the nearby menu based on the value of the selection in the dropdown.

   $(document).ready(function(){
       if (localStorage.getItem('role')) {
           //what do I do?;
       }
   });
   function DropDown(el) {
           this.dd = el;
           this.placeholder = this.dd.children('span');
           this.opts = this.dd.find('ul.dropdown > li');
           this.val = '';
           this.index = -1;
           this.initEvents();
       }
       DropDown.prototype = {
           initEvents : function() {
               var obj = this;
   
               obj.dd.on('click', function(event){
                   $(this).toggleClass('active');
                   return false;
               });
   
               obj.opts.on('click',function(){
                   var opt = $(this);
                   obj.val = opt.text();
                   obj.index = opt.index();
                   obj.placeholder.text(obj.val);
   
                   if (obj.val === 'Workflow Designer') {
                       obj.val = 'studio';
                   }
                   obj.val = obj.val.toLowerCase();
   
                   $('.agent, .supervisor, .manager, .studio').not( '.'+obj.val ).css('display','none');
                   $('.agent, .supervisor, .manager, .studio').filter( '.'+obj.val ).css('display','block');
                   localStorage.setItem('role', obj.val);
               });
           },
           getValue : function() {
               return this.val;
           },
           getIndex : function() {
               return this.index;
           }
       }
       $(function() {
   
           var dd = new DropDown( $('#dd') );
   
           $(document).click(function() {
               // all dropdowns
               $('.wrapper-dropdown-3').removeClass('active');
           });
       });
   </script>
   

The relevant HTML would be:

<div class="wrapper-demo">
                <div id="dd" class="wrapper-dropdown-3" tabindex="1">
                    <span>I am a(n): </span>
                    <ul class="dropdown">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i>Agent</a></li>
                        <li><a href="#"><i class="fa fa-user-plus fa-fw"></i>Supervisor</a></li>
                        <li><a href="#"><i class="fa fa-users fa-fw"></i>Manager</a></li>
                        <li><a href="#"><i class="fa fa-sitemap fa-fw"></i>Workflow Designer</a></li>
                    </ul>
                </div>
            ​</div>

JSFIDDLE

Answer 1

Twiked you fiddle, looks be be working as you intended:

https://jsfiddle.net/9nhsytwe/

var DropDown = function (el) {


    this.initEvents= function() {
    
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      var that=this;
      
      
        var obj = this;

        this.dd.on('click', function(event) {
            $(this).toggleClass('active');
            return false;
        });
        
        

        this.opts.on('click', function() {
            that.setVal($(this).text())
        });
    }
    
    this.setVal = function(val) {
            
            if (val === 'Workflow Designer') {
                val = 'studio';
            }
            console.log(val)
            val = val.toLowerCase();

            var currRole = '.' + val;

            $('.agent, .supervisor, .manager, .studio').not(currRole).css('display', 'none');
            $('.agent, .supervisor, .manager, .studio').filter(currRole).css('display', 'block');
            localStorage.setItem('role', currRole);
    }
    
    this.getValue= function() {
        return this.val;
    }
    this.getIndex= function() {
        return this.index;
    }
}
$(function() {

    var dd = new DropDown($('#dd'));
    dd.initEvents();

    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });
    
    if (localStorage.getItem('role')) {
        //what do I do?;
        console.log(localStorage.getItem('role'))
        dd.setVal(localStorage.getItem('role').replace('.', ''))
    }
});

div.row.topNav .small-3:first-child {
    text-align: right;
}

div.row.topNav .small-6 {
    margin-top: 12px;
}

div.row.topNav .small-3:last-child {
    text-align: left;
    margin-top: 18px;
}

ul.navigation > li.has-children > a:hover,
ul.navigation a[href="#"]:hover {
    cursor: default;
}

ul.navigation a {
    color: #6e7583;
    font-weight: normal;
    padding: 0 15px !important;
    line-height: initial !important;
}

.navigation > li:hover > a {
    color: #fa8c00;
}

ul.navigation > li.has-children:after {
    display: none;
}

ul.navigation ul ul {
    top: -2px;
    left: 100%;
}

ul.navigation ul a {
    color: #687074;
    font-weight: normal;
}

ul.navigation ul {
    z-index: 9999 !important;
    border-top: solid 2px #fa8c00;
    border-bottom: solid 2px #687074;
    padding: 0;
}

ul.navigation ul,
ul.navigation ul ul,
ul.navigation ul ul ul,
ul.navigation ul ul ul ul {
    background-color: #fff;
}

ul.navigation ul li a:hover,
ul.navigation ul ul li a:hover,
ul.navigation ul ul ul li a:hover,
ul.navigation ul ul ul ul li a:hover {
    background-color: #eee;
}

ul.navigation ul li:hover {
    background-color: #fff !important;
}

ul.navigation ul li a:hover {
    color: #687074;
    font-weight: normal;
}

ul.navigation li li {
    padding: 0;
}

ul.navigation ul.sub-menu > li > a {
    padding: 8px 24px !important;
    margin: 0;
    text-align: left;
    line-height: 15px !important;
}

section.middle.tab-bar-section.row.outer-row {
    max-width: 80em !important;
    margin: 8px auto 20px auto !important;
}

ul.navigation > li.has-children > a:before {
    content: "\f107";
    position: absolute;
    right: 0px;
    color: #6e7583;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-family: FontAwesome;
}

ul.navigation > li.has-children {
    margin-right: 4px;
}

ul.navigation > li > ul {
    top: 50px;
    /* padding-top: 40px; */
}

ul.navigation > li a {
    line-height: 20px !important;
    padding-bottom: 20px !important;
}

ul.navigation p {
    margin: 0;
    padding: 0;
}

.navigation-wrapper {
    float: none;
    /* display: block; */
    text-align: center;
    /* padding: 0; */
    /* margin: 0; */
    /* height: auto; */
    /* width: auto; */
    /* vertical-align: top; */
    /* position: absolute; */
    /* top: 26px; */
    /* right: 0; */
    /* vertical-align: middle !important; */
}

ul.navigation {
    z-index: 1;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    position: static;
    top: 0;
    left: 0;
    /* line-height: inherit; */
    /* float: none; */
    vertical-align: top;
}


/* GLOBALS */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

::selection {
    background: transparent;
}

::-moz-selection {
    background: transparent;
}

.wrapper-demo {
    /* margin: 60px 0 0 0; */
    *zoom: 1;
    /* font-weight: 400; */
    /* float: right; */
}

.wrapper-demo:after {
    clear: both;
    content: "";
    display: table;
}

.wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px;
    /* Styles */
    background: #fff;
    /* border-radius: 7px; */
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
    cursor: pointer;
    outline: none;
    /* Font settings */
    font-weight: bold;
    color: #6e7583;
}

.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #6e7583 transparent;
}

.wrapper-dropdown-3 .dropdown {
    /* Size & position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0, 0, 0, 0.17);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    font-weight: normal;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    list-style: none;
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1) transparent;
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #6e7583;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
    font-size: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border: none;
    border-radius: 0 0 7px 7px;
}


/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
}


/* Active state */

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
}


/* No CSS3 support */

.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
    display: none;
    opacity: 1;
    /* If opacity support but no pointer-events support */
    pointer-events: auto;
    /* If pointer-events support but no pointer-events support */
}

.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
    display: block;
}

ul.navigation {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
    z-index: 1;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 323px;
    background-repeat: repeat;
    background-position: center center;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
}

ul.navigation,
ul.navigation ul {
    list-style: none;
}

ul.navigation ul {
    z-index: 1000;
    width: auto;
    margin: 0;
    padding: 10px 0 10px 0;
    position: absolute;
    color: #ffffff;
    font-weight: normal;
    background-color: #34495e;
}

ul.navigation > li > ul {
    right: 0;
}

ul.navigation > li.has-children:after {
    content: ' ';
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    border-bottom-color: #34495e;
}

ul.navigation ul,
ul.navigation > li.has-children:after {
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    visibility: hidden;
    opacity: 0;
}

ul.navigation ul ul {
    top: 0;
    left: 100%;
    background-color: #34495e;
}

ul.navigation ul ul.openLeft {
    left: auto;
    right: 100%;
}

ul.navigation ul ul.openRight {
    right: auto;
    left: 100%;
}

ul.navigation a {
    text-decoration: none;
    height: 100%;
    outline: none;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
}

ul.navigation li {
    position: relative;
    list-style: none;
    margin: 0;
    height: 100%;
}

ul.navigation li > a {
    display: block;
    line-height: 45px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

ul.navigation li li {
    padding: 0 10px;
}

ul.navigation > li {
    position: relative;
    float: left;
    display: block;
}

ul.navigation li:hover > ul,
ul.navigation > li.has-children:hover:after {
    visibility: visible;
    opacity: 1;
}

ul.navigation li:hover {
    background-color: transparent;
}

ul.navigation ul > li {
    line-height: 15px;
}

ul.navigation ul > li > a {
    padding: 0 15px;
    text-align: left;
    margin-left: 9px;
    margin-right: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 15px;
}

ul.navigation ul > li:hover {
    background-color: #fa8c00;
}

#resultList .glossary .term a:visited {}

#resultList h3.title a:visited {
    color: #2200C1;
    text-decoration: underline;
}

#resultList .glossary .term a:focus {}

#resultList h3.title a:focus {
    color: #2200C1;
    text-decoration: underline;
}

ul.navigation li > a:hover {
    background-repeat: repeat;
    color: #fa8c00;
}

ul.navigation ul > li > a:hover {
    background-repeat: repeat;
    color: #ffffff;
    font-weight: normal;
}

ul.navigation ul ul > li > a:hover {
    background-repeat: repeat;
}

ul.navigation ul ul ul > li > a:hover {
    background-repeat: repeat;
}

ul.navigation ul ul ul ul > li > a:hover {
    background-repeat: repeat;
}

#resultList .glossary .term a:hover {}

#pagination a:hover {
    border-top: solid 1px #e2e2e6;
}

#resultList h3.title a:hover {
    text-decoration: underline;
}

#resultList .glossary .term a:active {}

#resultList h3.title a:active {
    color: #2200C1;
    text-decoration: underline;
}

ul.navigation ul > li.has-children > a:after {
    position: absolute;
    border: none;
    content: "\00bb";
    right: 5px;
    top: 9px;
}

nav.tab-bar {
    height: auto;
    line-height: inherit;
    padding: 10px 0;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

nav.tab-bar .menu-icon {
    display: none;
}

.tab-bar-section {
    position: relative;
}

.tab-bar-section.middle {
    width: 100%;
    left: 0;
    right: 0;
    height: auto;
    min-height: 2.5em;
}

.tab-bar-section a.logo {
    border: none;
    padding: 0;
    margin: 0;
    position: absolute;
    display: block;
    width: 323px;
    height: 75px;
    top: 50%;
    bottom: auto;
    margin-top: -37.5px;
    left: 0;
    background: transparent url('Images/logo.png') no-repeat center center;
    -pie-background: transparent url('Skins/Fluid/Stylesheets/Images/logo.png') no-repeat center center;
}


/* Topbar Menu Functionality Styles */

#navigation.topbar > .row {
    height: 100%;
}

#navigation.topbar {
    background-color: #292928;
    padding-top: 10px;
    padding-bottom: 10px;
}

<div class="row topNav">
    <div class="small-6 columns">
        <div class="navigation-wrapper">
            <ul class="navigation clearfix">
                <li class="has-children manager supervisor agent" value="1"><a href="#">Applications</a>
                    <ul class="sub-menu">
                        <li class="supervisor" value="3"><a href="stuff.htm">Supe</a></li>

                        <li class="supervisor agent" value="2"><a href="stuff2.htm">AAU</a>
                        </li>
                    </ul>


                    <li class="has-children manager supervisor" value="2"><a href="#">Channels</a>
                        <ul class="sub-menu">
                            <li class="manager" value="1"><a href="#">Inbound</a>
                            </li>
                            <li class="manager" value="2"><a href="#">Outbound</a>
                            </li>
                            <li class="has-children manager" value="3"><a href="#">Dial</a>
                                <ul class="sub-menu manager">
                                    <li value="1"><a href="#">Overview</a>
                                    </li>
                                    <li value="2"><a href="#">List</a>
                                    </li>
                                    <li value="3"><a href="#">Call</a>
                                    </li>
                                    <li value="4"><a href="#">DNC</a>
                                    </li>
                                    <li value="5"><a href="#">Disp</a>
                                    </li>
                                    <li value="6"><a href="#">SMS</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="has-children manager" value="4"><a href="#">Email</a>
                                <ul class="sub-menu manager">
                                    <li value="1"><a href="#">Overview</a>
                                    </li>
                                    <li value="2"><a href="#">QR</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="has-children manager" value="5"><a href="#">Chat</a>
                                <ul class="sub-menu">
                                    <li class="manager supervisor" value="1"><a href="#">Overview</a>
                                    </li>
                                    <li class="manager supervisor" value="2"><a href="#">CP</a>
                                    </li>
                                    <li class="manager supervisor agent" value="3"><a href="#">QR</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="manager" value="6"><a href="#">WII</a>
                            </li>
                        </ul>
                    </li>
                    <li class="has-children manager supervisor agent" value="3"><a href="#">System</a>
                        <ul class="sub-menu">
                            <li class="manager studio supervisor agent" value="1"><a href="#">Account</a>
                            </li>
                            <li class="manager" value="2"><a href="#">AB</a>
                            </li>
                            <li class="manager" value="3"><a href="#">AM</a>
                            </li>
                            <li class="manager" value="4"><a href="#">CA</a>
                            </li>
                            <li class="manager" value="5"><a href="#">DI</a>
                            </li>
                            <li class="manager supervisor" value="6"><a href="#">HOO</a>
                            </li>
                            <li class="manager" value="7"><a href="#">POC</a>
                            </li>
                            <li class="manager supervisor agent" value="8"><a href="#">QR</a>
                            </li>
                            <li class="has-children manager" value="9"><a href="#">SM</a>
                                <ul class="sub-menu manager">
                                    <li value="1"><a href="#">SK</a>
                                    </li>
                                    <li value="2"><a href="#">PR</a>
                                    </li>
                                    <li value="3"><a href="#">PC</a>
                                    </li>
                                    <li value="4"><a href="#">SCP</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="has-children manager" value="10"><a href="#">USM</a>
                                <ul class="sub-menu manager">
                                    <li value="1"><a href="#">US</a>
                                    </li>
                                    <li value="2"><a href="#">TE</a>
                                    </li>
                                    <li value="3"><a href="#">SECTE</a>
                                    </li>
                                    <li value="4"><a href="#">LO</a>
                                    </li>
                                    <li value="5"><a href="#">FE</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="has-children manager" value="11"><a href="#">ST</a>
                                <ul class="sub-menu manager">
                                    <li value="1"><a href="#">STN</a>
                                    </li>
                                    <li value="2"><a href="#">SP</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="manager" value="12"><a href="#">UC</a>
                            </li>
                            <li class="manager supervisor" value="13"><a href="#">TA</a>
                            </li>
                            <li value="14"><a href="#">AI</a>
                            </li>
                            <li class="manager" value="15"><a href="#">AAA</a>
                            </li>
                        </ul>
                    </li>
                    <li class="has-children reporting manager supervisor agent" value="4"><a href="#">Reporting</a>
                        <ul class="sub-menu">
                            <li class="manager supervisor agent" value="1"><a href="#">Pre-built</a>
                            </li>
                            <li class="manager supervisor" value="2"><a href="#">Custom</a>
                            </li>
                            <li class="manager" value="3"><a href="#">DDR</a>
                            </li>
                            <li class="has-children manager supervisor" value="4"><a href="#">DM</a>
                                <ul class="sub-menu manager supervisor">
                                    <li value="1"><a href="#">DB</a>
                                    </li>
                                    <li value="2"><a href="#">WI</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="has-children manager" value="5"><a href="#">DD Download</a>
                                <ul class="sub-menu">
                                    <li value="1"><a href="#">DDR</a>
                                    </li>
                                    <li value="2"><a href="#">cU</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="manager" value="6"><a href="#">RL</a>
                            </li>
                            <li value="7"><a href="#">RS</a>
                            </li>
                            <li class="manager" value="8"><a href="#">iV</a>
                            </li>
                            <li value="9"><a href="#">DD</a>
                            </li>
                        </ul>
                    </li>
                    <li class="has-children manager studio" value="5"><a href="#">Design</a>
                        <ul class="sub-menu manager studio">
                            <li value="1"><a href="#">ST</a>
                            </li>
                            <li value="2"><a href="#">SCSC</a>
                            </li>
                        </ul>
                    </li>
                    <li class="has-children manager supervisor" value="6"><a href="#">Optimization </a>
                        <ul class="sub-menu">
                            <li class="manager" value="1"><a href="#">EC</a>
                            </li>
                            <li class="manager" value="2"><a href="#">iV</a>
                            </li>
                            <li class="manager supervisor agent" value="3"><a href="#">iCWO</a>
                            </li>
                            <li class="manager supervisor" value="4"><a href="#">WII</a>
                            </li>
                        </ul>
                    </li>
            </ul>
        </div>
    </div>
    <div class="small-3 columns">

        <div class="wrapper-demo">
            <div id="dd" class="wrapper-dropdown-3" tabindex="1">
                <span>I am a(n): </span>
                <ul class="dropdown">
                    <li><a href="#"><i class="icon-envelope icon-large"></i>Agent</a></li>
                    <li><a href="#"><i class="icon-envelope icon-large"></i>Supervisor</a></li>
                    <li><a href="#"><i class="icon-envelope icon-large"></i>Manager</a></li>
                    <li><a href="#"><i class="icon-envelope icon-large"></i>Workflow Designer</a></li>
                </ul>
            </div>
        </div>



    </div>
</div>