We Keep Coding

How to change script to use more UL select boxes?

I found this code for ul select box. I need 3 different ul select boxes. So I made some changes but now is slide up only last "Year" select box. Is there a problem with "selected" tag?
ORIGINAL CODE:
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').slideDown();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.slideUp();
});
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>
MY CODE:
$(".day ul").on("click", ".active", function() {
$(this).closest(".day ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".day ul").children('li:not(.active)');
$(".day ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".day ul").children('.active').html($(this).html());
allOptions.slideUp();
});
$(".month ul").on("click", ".active", function() {
$(this).closest(".month ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".month ul").children('li:not(.active)');
$(".month ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".month ul").children('.active').html($(this).html());
allOptions.slideUp();
});
$(".year ul").on("click", ".active", function() {
$(this).closest(".year ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".year ul").children('li:not(.active)');
$(".year ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".year ul").children('.active').html($(this).html());
allOptions.slideUp();
});
.day, .month, .year{
float:left;
width:100px;
display:block;
width:auto;
height: 34px;
}
.day ul, .month ul, .year ul {
list-style-type:none;
cursor: pointer;
width: 100px;
}
.day ul li, .year ul li, .month ul li {
float: left;
width:100px;
text-indent: 5px;
height: 34px;
line-height: 34px;
border:1px solid #000;
background: #fff;
}
.day ul li.active, .month ul li.active, .year ul li.active {
}
.day ul li a, .month ul li a, .year ul li a {
text-decoration: none;
color: #000;
}
.day ul li:not(.active), .month ul li:not(.active), .year ul li:not(.active) {
float: left;
display: none;
}
.day ul li:not(.active):hover, .day ul li.selected:not(.active), .month ul li:not(.active):hover, .month ul li.selected:not(.active), .year ul li:not(.active):hover, .year ul li.selected:not(.active) {
background: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="day">
<ul>
<li class="active">Day</li>
<li>01.08</li>
<li>02.08</li>
<li>03.08</li>
<li>04.08</li>
<li>05.08</li>
</ul>
</div>
<div class="month">
<ul>
<li class="active">Month</li>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
<div class="year">
<ul>
<li class="active">Year</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ul>
</div>

you just need to wrap up the original code with an iterator and your problem will be solved.
I have create an example on codepen with 3 UL tags, you can copy and paste the UL blocks to have the same code work on all UL tags
This is what your js code should look like.
JS:
$(document).ready(function(){
$("ul").each(function(){
var $thisUL = $(this);
$thisUL.on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').slideDown();
});
var allOptions = $thisUL.children('li:not(.init)');
$thisUL.on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$thisUL.children('.init').html($(this).html());
allOptions.slideUp();
});
});
});

Iterating through a custom UL LI A list and isolating only items that have the selected classname attributed to them

I need your help,
Similar to what the code does below for multi-select boxes that are selected, how can I create a new function that would iterate through my custom UL LI A list and isolating only items that have the "selected" classname attributed to them:
var sel = document.getElementById('selectbox');
c = 1
for (var i=0, len=sel.options.length; i<len; i++) {
if (sel.options[i].selected) {
alert(sel.options[i].value)
c++
}
}
Here is the HTML, CSS and Javascript:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.dropdown dd, .dropdown dt, .dropdown ul {
margin:0px;
padding:0px;
}
.dropdown dd {
position:relative;
}
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#000;}
.dropdown dt a:hover, .dropdown dt a:focus {
border: 1px solid rgb(128,128,128);
}
.dropdown dt a {
background:#e4dfcb url(arrow.png) no-repeat scroll right center;
display:block;
padding-right:20px;
border:1px solid rgb(170,170,170);
width:150px;
}
.dropdown dt a span {
cursor:pointer;
display:block;
padding:5px;
}
.dropdown dd ul {
background:#e4dfcb none repeat scroll 0 0;
border:1px solid rgb(170,170,170);
display:none;
left:0px;
padding:5px 0px;
position:absolute;
top:2px;
width:auto;
min-width:170px;
list-style:none;
}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.selected{
background-color:#d0c9af;
}
</style>
<script type="text/javascript">
/*
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
*/
$(document).ready(function() {
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function(e) {
var text = $(this).html();
if (e.ctrlKey) {
$(this).addClass('selected');
}
else {
var text = $(this).html();
$(".dropdown dd ul li a").removeClass('selected');
$(this).addClass('selected');
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
}
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});
</script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Please select the country</span></dt>
<dd>
<ul>
<li>Brazil<span class="value">BR</span></li>
<li>France<span class="value">FR</span></li>
<li>Germany<span class="value">DE</span></li>
<li>India<span class="value">IN</span></li>
<li>Japan<span class="value">JP</span></li>
<li>Serbia<span class="value">CS</span></li>
<li>United Kingdom<span class="value">UK</span></li>
<li>United States<span class="value">US</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>

Can you just use jQuery to select them and check the length? e.g.
var c = $(".dropdown dd ul li a.selected").length
Or you can iterate through it in the normal jQuery way

Converting a UL LI Single Select Box to a Multiple Select Box

I really need the help of an expert here on this site. I'd like to be able to, add on and build functionality such that my custom UL LI single select boxes, would be able to handle multiple user selections.
Here's the typical scenario, the user holds down the CTRL Key on their keyboard and selects multiple values from the select box.
Here is a quick fiddle: http://jsfiddle.net/c2ezuw24/1/
Here is the existing Markup:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.dropdown dd, .dropdown dt, .dropdown ul {
margin:0px;
padding:0px;
}
.dropdown dd {
position:relative;
}
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#000;}
.dropdown dt a:hover, .dropdown dt a:focus {
border: 1px solid rgb(128,128,128);
}
.dropdown dt a {
background:#e4dfcb url(arrow.png) no-repeat scroll right center;
display:block;
padding-right:20px;
border:1px solid rgb(170,170,170);
width:150px;
}
.dropdown dt a span {
cursor:pointer;
display:block;
padding:5px;
}
.dropdown dd ul {
background:#e4dfcb none repeat scroll 0 0;
border:1px solid rgb(170,170,170);
display:none;
left:0px;
padding:5px 0px;
position:absolute;
top:2px;
width:auto;
min-width:170px;
list-style:none;
}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Please select the country</span></dt>
<dd>
<ul>
<li>Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></li>
<li>France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></li>
<li>Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></li>
<li>India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></li>
<li>Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></li>
<li>Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></li>
<li>United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></li>
<li>United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>

use built in html feature.
http://jsfiddle.net/2v8foz90/
<select multiple>
<option value="DEDE">Hello</option>
<option value="FEFE">bonjour</option>
<option value="SESE">Ciao</option>
<option value="AEAE">hallo</option>
</select>

A block element isn't displayed in Chrome under Mac OS

The submenu (the "lvl2" class) gets displayed upon mouseover in all browsers but MacOS Chrome.
OS version: 10.10.4,
chrome version: 45.0.2454.85
Here's the code: http://jsfiddle.net/166nj6rp/2/
JS
$(document).ready(function () {
$('#main_menu ul.lvl1 > li').on('mouseenter', function () {
$(this).find('ul').show(); //.css('display', 'block');
}).on('mouseleave', function () {
$(this).find('ul').hide();
});
});
HTML
<div id="main_menu">
<ul>
<li> Main
<ul class="lvl1">
<li> Mouseover here
<ul class="lvl2">
<li> First
</li>
<li> Second
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Styles
#main_menu {
background:#333;
color:#cccccc;
height:43px;
position:relative;
}
#main_menu ul {
list-style:none;
display:block;
padding-left:0px;
}
#main_menu > ul {
height:43px;
}
#main_menu > ul > li {
display:inline;
position:relative;
line-height: 37px;
}
#main_menu > ul > li > a {
padding:9px 3px 10px 8px;
}
#main_menu > ul > li > ul {
display:block;
background:#333;
position:absolute;
left:-1px;
top:30px;
min-width:180px;
z-index:999;
}
#main_menu > ul > li li a {
display:block;
}
#main_menu > ul > li li a:hover {
background:#555;
}
#main_menu ul.lvl1 > li:hover {
background:#555;
}
#main_menu ul.lvl1 > li {
position:relative;
}
#main_menu ul.lvl2 {
display:none;
position: absolute;
top:0px;
left:150px;
background:#333;
min-width:150px;
max-width:300px;
}
#main_menu > ul li > a {
color:#ccc;
font-size:15px;
}

If think its all with (absolute positioning inside inline element):
#main_menu > ul > li {
/* display: inline; */
}
Solution: wrap your second ul in div or get rid of "inline" property.

Change 'display:inline' into 'display:block'. It worked.
#main_menu > ul > li {
display:block;
position:relative;
line-height: 37px;
}

Jquery ui: How to toggle backup when mouse out?

I have the following code. When I mouse over/hover over the drop down box it opens up.
How do I make the drop down box toggle back up for the mouseout?
CSS in the <head>
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a {color:0092DD !important;text-decoration:none; outline:none;}
.dropdown a:visited { color:#0092DD; text-decoration:none; outline:none;}
.dropdown a:hover { color:#0092DD;}
.dropdown dt a:hover, .dropdown dt a:focus
{ color:#0092DD !important; border: 1px solid #0092DD;}
.dropdown dt a {background:#fff url(./img/arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #0092DD; width:47px; border-radius:6px;
-moz-border-radius:6px }
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#ccc none repeat scroll 0 0; border:1px solid #000; color:#0092DD; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:117px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block; color:#000 !important;}
.dropdown dd ul li a:hover { background-color:#777; color:#fff !important}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>drop down with CSS and jQuery - demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Actions</span></dt>
<dd>
<ul>
<li>UK<img class="flag" src="br.png" alt="" /><span class="value">UK</span></li>
<li>France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>
Javascript also in the <head>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").hover(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
alert(getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('hover', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").hover(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>