如何在从本地存储中的变量加载页面时设置基于 UL 的下拉列表的值
How do I set the value of a UL-based dropdown list on page load from a variable in localStorage?
我正在使用我在这里找到的基于 UL 的漂亮下拉列表（如果重要的话，它特别是第三个模型）作为我的用户基于角色的选择框的基础。我不希望我的用户每次访问时都必须选择他们的角色，所以每当他们进行更改时，我都会将他们的选择存储到 localStorage 中。
我知道如何从存储中恢复变量，并且知道如何使用该变量为选择框设置值，但我不知道如何更新此基于 UL 的下拉列表。此外，我不知道如何更新当用户从列表中选择时应该触发的点击事件。
逻辑是：
- 检查是否存在特定的本地存储对象。如果没有，请不要执行任何操作，只需等待用户与下拉列表交互。
- 将下拉列表的值设置为 localStorage 对象的值。
-
激活脚本的点击功能，意思是：
- 将下拉列表的当前显示文本设置为存储在 localStorage 中的内容。
- 根据下拉列表中所选内容的值筛选附近的菜单。
$(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>
相关的 HTML 将是：
<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>
吉斯菲德尔
暇暮你摆弄，看起来正在按你的预期工作：
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>相关文章：
- 无法使用PHP动态设置下拉列表中的值
- 如何根据GeoJSON属性中的ID号设置下拉列表项的顺序
- 如何设置下拉列表项的样式
- 如何通过在Javascript中单击链接，用链接的值设置下拉列表值
- 使用 angularjs 设置下拉列表的默认值
- 在 javascript 中设置下拉列表的值
- 根据选项值的文本而不是使用 jQuery 的值设置下拉列表的选定值
- 在 js 中循环以设置下拉列表的默认值.在 IE8 中不起作用
- JQuery 设置下拉列表框已选中选项 - 不是按值，而是按显示文本
- 如何通过名称 -javascript/jquery 设置下拉列表的焦点
- 通过 JQuery 设置下拉列表值
- 如何在 JavaScript 中设置下拉列表的选定值.“共享点列表”窗体
- 在Bootstrap 3.0中设置下拉列表的宽度
- 用省略号设置下拉列表选项
- 使用角度引导选择设置下拉列表的选定选项
- 无法在jquery mobile中设置下拉列表的值
- 根据输入字段设置下拉列表值
- 不能使用angular.js和php设置下拉列表中的值
- Javascript通过文本设置下拉列表的选定值
- 无法在javascript中设置下拉列表
