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

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>

Related

Drag Menu Item element from Submenu Jquery

I am total noob in Jquery. I created submenu in xhtml.
<p:panelMenu style="width:200px" id="menus">
<p:submenu label="Add Control" styleClass="ctl-tiered-submenu-1"
rendered="true">
<p:menuitem value="Bilance" actionListener="#{myIndexBean.addControl}"/>
<p:separator />
<p:menuitem value="Average Salary" />
</p:submenu>
</p:panelMenu>
Now I want have draggable MenuItem. I created this using JQuery:
$(".ui-panelmenu-content").draggable({revert:true });
Now I have draggable MenuItem, but I can't move this element outside of Submenu. How I can correct this?
HTML
<!Doctype html>
<html>
<body>
<ul>
<li>Blah
<li>Blah
<li>Blah
<li>Blah
<li>Blah
<li>Blah
</ul>
<div class="ui-widget-header">
<p>Drag a menu item over me!</p>
</div>
</body>
</html>
CSS
ul li {
display:inline-block;
position:relative;
text-align:center;
}
#media screen and (min-width:480px) {ul li{width:33.33%;}}
#media screen and (max-width:479px) {ul li{width:50%;}}
#media screen and (max-width:195px) {ul li{width:100%;}}
ul li a {
display:block;
padding:20px 0;
text-decoration:none;
color: black;
text-transform:uppercase;
}
ul li:nth-child(1) a{background-color: green;}
ul li:nth-child(2) a{background-color: red;}
ul li:nth-child(3) a{background-color: #ff8400;}
ul li:nth-child(4) a{background-color: purple;}
ul li:nth-child(5) a{background-color: #49a7f3;}
ul li:nth-child(6) a{background-color: yellow; }
.ui-widget-header {
height:56px;
padding:18px 0;
margin:auto !important;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
jQuery
$(function () {
$("ul li").draggable({
snap: ".ui-widget-header",
snapMode: "inner",
revert: "invalid"
});
$(".ui-widget-header").droppable({
accept: "li",
drop: function (event, ui) {
location = $(ui.draggable).children('a').data('address');
}
});
$(window).resize(function () {
var droppable = $('.ui-widget-header');
droppable.width($('li').outerWidth() - parseInt(droppable.css('borderLeftWidth'), 10) - parseInt(droppable.css('borderRightWidth'), 10));
}).resize();
});

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

Dropdown with checkboxes from inside [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm developing an asp.net website where i want to include in my html using asp a dropdwon menu with checkboxes and i want to know if these checkboxes are selected. if anyone can help me please ?
You will need to use javascript/jQuery to prevent the dropdown from toggling when you click the checkboxes. Here is an example dropdown with checkboxes:
HTML:
<dl class="dropdown">
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
CSS:
body {
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color:#fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
}
a {
color:#fff;
}
.dropdown dd, .dropdown dt {
margin:0px;
padding:0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position:relative;
}
.dropdown a,
.dropdown a:visited {
color:#fff;
text-decoration:none;
outline:none;
font-size: 12px;
}
.dropdown dt a {
background-color:#4F6877;
display:block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border:0;
width:272px;
}
.dropdown dt a span, .multiSel span {
cursor:pointer;
display:inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #4F6877;
border:0;
color:#fff;
display:none;
left:0px;
padding: 2px 15px 2px 5px;
position:absolute;
top:2px;
width:280px;
list-style:none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display:none;
}
.dropdown dd ul li a {
padding:5px;
display:block;
}
.dropdown dd ul li a:hover {
background-color:#fff;
}
button {
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
}
JS:
$(".dropdown dt a").on('click', function () {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function () {
$(".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();
});
$('.mutliSelect input[type="checkbox"]').on('click', function () {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
}
else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
Codepen with above codes: http://codepen.io/ElmahdiMahmoud/pen/hlmri
(Author attributes available in codepen)
You Should
Make sure you assign Unique ID for each checkbox elements.
By Using JQuery:
$('#' + id).is(":checked")

keep same selected option (using ul li) after refresh page

I have made a select option using ul li JavaScript. it works fine. The issue is that I want to keep the same selected option after the page is refreshed. Now it is reset after the page is refreshed.
Here is my code:
HTML:
<dl class="dropdown" id="ajaxselect">
<dt><span>Keywords</span></dt>
<dd>
<ul>
<li>Start With <span class="value">startwith</span></li>
<li>Contains <span class="value">contains</span></li>
<li>End With <span class="value">endwith</span></li>
</ul>
</dd>
</dl>
JS:
$(document).ready(function() {
$(".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();
var data = getSelectedValue("ajaxselect");
//alert(data);
});
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();
});
});
CSS:
.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:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; 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 #d4ca9a; color:#C5C0B0; display:none;
left:0px; top:2px; width:auto; 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;}
Any solution for this? Thanks.

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>

Categories