Dropdown menu hover class not removing

Dropdown menu hover class not removing - javascript

The current implementation allows the use of select boxes and converts them into list items so they can be styled.
When you actually click on the dropdown menus and start hovering over the list item elements, a hover class is added to the ul. Now if the user clicks on the close button clicks on the body, it will close the dropdown and remove the hovering class.
Problem: When the user clicks on the item within the list, the hover class is not removed - until the document is clicked to close it.
var jq = jQuery.noConflict();
(function(jq) {
}(jQuery));
jq('.').selectBox();
.options li:hover {
background-color: #000;
color: #fff;
}
.options li.selected {
background-color: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="selectSizeMain">
<select class="selectBoxStyle">
<option value="">Choose Size</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
</div>
<select class="selectBoxStyle">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>

As I understood you need this one.
var jq = jQuery.noConflict();
(function(jq) {
jq.fn.selectBox = function() {
// Cache the number of options
var sthis = jq(this),
numberOfOptions = jq(this).children('option').length;
// Hides the select element
if (jq('html').hasClass('touch')) {
jq('.options').addClass('s-hidden');
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.wrap('<div class="styledSelect"></div>');
} else {
sthis.addClass('s-hidden');
// Wrap the select element in a div
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.after('<div class="styledSelect"></div>');
// Cache the styled div
var styledSelect = sthis.next('div.styledSelect');
// Insert an unordered list after the styled div and also cache the list
var slist = jq('<ul />', {
'class': 'options'
}).insertAfter(styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
jq('<li />', {
text: sthis.children('option').eq(i).text(),
"data-value": sthis.children('option').eq(i).val(),
"class": sthis.children('option').eq(i).attr('class'),
"data-sku": sthis.children('option').eq(i).data('sku'),
"data-stock": sthis.children('option').eq(i).data('stock'),
"data-backorder": sthis.children('option').eq(i).data('backorder'),
"data-preorder": sthis.children('option').eq(i).data('preorder')
}).appendTo(slist);
}
// Cache the list items
var slistItems = slist.children('li');
slistItems.hover(function() {
slist.addClass('hovering');
});
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
styledSelect.click(function(e) {
e.stopPropagation();
var closeClicked = jq(this).hasClass("active");
jq('div.styledSelect.active').each(function() {
slist.removeClass('hovering');
jq(this).removeClass('active').next('ul.options').hide();
});
if (!closeClicked) {
jq(this).toggleClass('active').next('ul.options').toggle();
}
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
slistItems.click(function(e) {
e.stopPropagation();
styledSelect.text(jq(this).text()).removeClass('active');
jq(this).addClass("selected").siblings().removeClass("selected");
sthis.val(jq(this).data('value'));
sthis.addClass('THIS');
slist.removeClass('hovering').hide();
});
// Show the first select option in the styled div
if (sthis.val()) {
var currentSelect = sthis.find("option:selected").val();
styledSelect.text(sthis.find("option:selected").text());
slist.find("li[data-value='" + currentSelect + "']").each(function() {
jq(this).addClass('selected');
slist.removeClass('hovering');
});
} else {
styledSelect.text(sthis.children('option').eq(0).text());
}
// Hides the unordered list when clicking outside of it
jq(document).click(function() {
styledSelect.removeClass('active');
slist.removeClass('hovering').hide();
});
jq('#addtoBag, .wishListBtn').click(function() {
styledSelect.removeClass('active');
slist.removeClass('hovering').hide();
});
}
};
}(jQuery));
jq('.selectBoxStyle').selectBox();
.selectSizeMain {
width: 56.77966%;
float: none;
margin: 2.1875rem auto auto;
}
.s-hidden {
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
color: black;
font-family: GibsonRegular, HelveticaNeue, Helvetica, sans-serif;
font-size: 14px;
font-size: .875rem;
height: 40px;
width: 100%;
}
.styledSelect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 11px 13px;
border: 1px solid #ddd;
background-color: #fff;
}
.styledSelect:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: black transparent transparent transparent;
position: absolute;
top: 17px;
right: 9px;
}
.styledSelect.active:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: green transparent transparent transparent;
position: absolute;
top: 17px;
right: 9px;
}
.options {
display: none;
position: absolute;
max-height: 280px;
overflow-y: scroll;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0 0;
padding: 0 0;
list-style: none;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
.options li {
padding: 11px 13px;
margin: 0 0;
}
.options li:hover {
background-color: #000;
color: #fff;
}
.options li.selected {
background-color: #fff;
color: #000;
}
<div class="selectSizeMain">
<select class="selectBoxStyle">
<option value="">Choose Size</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
</div>
<select class="selectBoxStyle">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>

Related

How to set cloning on select?

I have a question about <select>
This my code
<div class="AllSize SizeSML hidden2">
<div class="row-fluid appendSMLModel">
<div class="row-fluid span16 appendSML" for="0">
<div class="span3 mobileFullPhone2">
<label>Size</label>
<div class="select-container">
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
<div class="span5 mobileFullPhone2">
<label>Stock</label>
<input type="text" autocomplete="off" name="size_SML_input" value="" validate="" required="">
</div>
</div>
</div>
</div>
$(document).on('change', '#SizeUniSML', function(e) {
var selectval = $(this).find(":selected").val();
if (selectval == "delete") {
$(this).parents(".appendSML").remove();
} else if (selectval !== "") {
var count = $('.appendSML').length;
var clone = $('.appendSML:first').clone();
$('.appendSMLModel').append(clone);
}
});
This jsfiddle
Ok, this my question
Question 1
How do I add the code if I use clone()? If you see the code above, the first option is only filled by small medium and large, but I want to add the code after the clone <option value="delete">Delete</option> to delete. To be like this
---------------------- This NOT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
---------------------- This SELECT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="delete">Delete</option>
</select>
Question 2
If I choose a medium, then medium option on the clone will be disabled
---------------------- This NOT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium" selected="" >Medium</option>
<option value="large">Large</option>
</select>
---------------------- This SELECT CLONE:FIRST ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium" disabled="">Medium</option>
<option value="large">Large</option>
<option value="delete">Delete</option>
</select>
But if I remove the select, then the disabled option will reappear
Question 3
How to turn off the jquery function if I have selected the option?
For example in the first select, I select medium, and then the second clone will appear. But if I modify the first select to be large, why third clone select will appear? I want when I have selected select, then do not add clones again

I would be inclined to make a clone right away and store it.
You can use jQuery methods right on a clone...even before you put it into the dom.
So you can add new option and reset the stored clone doing something like:
var $rowClone = $('.appendSML:first').clone();
$rowClone.find('select')
.append('<option value="delete">Delete</option>')
.val('')
.children()
.prop('disabled', false);
Then when you need to add a new one...make a clone of the above $rowClone.
To disable the other options, look for all the other selects using not() selector to ignore the current one
$(document).on('change', '.SizeUniSML', function(e) {
var selectval = $(this).val();
if (selectval == "delete") {
$(this).parents(".appendSML").remove();
} else if (selectval !== "") {
// clone stored row and append
var clone = $rowClone.clone();
$('.appendSMLModel').append(clone);
// disable other options with same value
$('.SizeUniSML').not(this).find('option[value="' + selectval + '"]').prop('disabled', true)
}
});
Note that ID's can't be repeated so I changed the select ID to class instead
DEMO

I've taken your fiddle and put it right in here, with a few changes and comments to explain
var clones = []; //this will hold the state for options selected so far
$(document).on('change', '.size-sml-select', function(e) {
var selectval = $(this).val(); //shorthand for getting select value
if (selectval == "delete") {
//we want to update the state to reflect the option that was just removed
$(this).find('option').each(function(){
if($(this).attr('disabled') && $(this).val()!==""){
clones.splice(clones.indexOf($(this).val()), 1);
}
});
//remove actual html
$(this).parents(".appendSML").remove();
} else if (selectval !== "") {
//if this option hasn't been chosen before
if(clones.indexOf(selectval)<0){
//add to the state array
clones.push(selectval);
var count = $('.appendSML').length;
var clone = $('.appendSML:first').clone();
var selectClone = clone.find('select');
//update the disabled status of the just selected option
selectClone.find('option').each(function(){
if(this.value===selectval){
console.log(this.value);
$(this).attr("disabled","true");
}
});
//add the delete option
selectClone.append('<option value="delete">Delete</option>');
$('.appendSMLModel').append(clone);
}
}
});
div, input, textarea, button, select, label, a {
-webkit-tap-highlight-color: transparent;
}
.row-fluid {
position: relative;
margin-left: -12px;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid>[class*="span"], span7per, span10per {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 12px;
}
.row-fluid>.span16 {
width: 100%;
}
.row-fluid>.span3 {
width: 18.75%;
}
label {
display: block;
text-align: left;
font-weight: 500;
cursor: default;
margin-bottom: 5px;
font-size: 11px;
line-height: 16px;
text-transform: capitalize;
}
.checkout-container label {
display: inline-block;
}
select {
position: relative;
width: 100%;
display: block;
font-weight: 400;
padding-left: 6px;
padding-right: 0;
text-indent: 0.01px;
text-overflow: '';
background: transparent;
border: 1px solid #777;
outline: none;
border-radius: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
min-height: 30px;
background: transparent url(https://www.ssense.com/images/dropdow-arrow-2xmargin-right.png) center right no-repeat;
background-size: 16px;
cursor: pointer;
text-transform: none;
}
select, input {
color: inherit;
font: inherit;
margin: 0;
}
form input, form select, .form input, .form select {
margin-bottom: 20px;
width: 100%;
}
:invalid {
box-shadow: none;
}
.row-fluid>.span5 {
width: 31.25%;
}
input {
height: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
border-radius: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #777;
outline: 0;
min-height: 30px;
padding: 0 6px;
background: transparent;
vertical-align: top;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="AllSize SizeSML hidden2">
<div class="row-fluid appendSMLModel">
<div class="row-fluid span16 appendSML" for="0">
<div class="span3 mobileFullPhone2">
<label>Size</label>
<div class="select-container">
<select name="size_SML_select" id="SizeUniSML" validate="" required="" class="size-sml-select">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
<div class="span5 mobileFullPhone2">
<label>Stock</label>
<input type="text" autocomplete="off" name="size_SML_input" value="" validate="" required="">
</div>
</div>
</div>
</div>

You will find it simpler to :
create the clone unconditionally at the outset.
show/hide the clone instead of append/remove.
Also, the required behaviour of the original and cloned <select> elements is so different that they warrant their own change handlers. A common hander only complicates matters.
Something like this should do it :
jQuery(function($) {
var $originalSelect = $('#SizeUniSML');
var $originalWrapper = $originalSelect.closest('.appendSML');
// clone the wrapper unconditionally, and append, ...
var $clonedWrapper = $originalWrapper.clone().insertAfter($originalWrapper).hide();
// ... and append a "delete" option to the cloned select element
var $clonedSelect = $clonedWrapper.find('select').prop('id', '').append('<option value="delete">Delete</option>');
// attach 'change' handler to $originalSelect
$originalSelect.on('change', function(e) {
if ($(this).val() !== '') {
$clonedWrapper.show().find('select').val('')
.find('option').prop('disabled', false) // enable all options in clone
.eq(this.selectedIndex).prop('disabled', true); // disable corresponding option in clone
// (placeholder) do other stuff with selectedVal?
}
});
// attach 'change' handler to $clonedSelect
$clonedSelect.on('change', function(e) {
switch($(this).val()) {
case '':
// do nothing
break;
case 'delete':
$originalSelect.val(''); // presumably?
$clonedWrapper.hide();
break;
default:
// (placeholder) do other stuff with selectedVal?
}
});
});
Demo
If you have "other stuff" that is common to both handlers, then write a named function and call it from the placeholders.

when submtting form, i do not want the page to load when pop up appears

i have a form that loads unique pages when submitted based on what the user selects on a particular drop-down. in a particular option in the drop-down i set the pop up screen to show when the form is submitted but this loads the page again and brings the pop up. i need to prevent the page from loading again, please help
<label>payment plan?</label>
<select id="mySelect" name="payment-plan">
<option value="plan.html">day</option>
<option value="plan1.html">night</option>
<option value="#msa-popup1">special</option>
<option value="plan3.html">day and night</option>
<option value="plan4.html">weekly</option>
<option value="plan5.html">monthly</option>
<option value="plan6.html">Yearly</option>
</select>
<!-- pop up -->
<div id="msa-popup1" class="msa-overlay">
<div class="msa-popup">
<h2>For Sale?</h2>
<a class="msa-close" href="#">×</a>
<div class="msa-content">
what plan suits you? <br>
</div>
</div>
</div>
<!-- pop up ending -->
.msa-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.51);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.msa-overlay:target {
visibility: visible;
opacity: 1;
}
.msa-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 65%;
position: relative;
transition: all 5s ease-in-out;
}
.msa-popup h2 {
margin-top: 0;
color: #333;
font-family: Josefin Sans, sans-serif;
}
.msa-popup .msa-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-weight: bold;
text-decoration: none;
color: #333;
}
.msa-popup .msa-close:hover {
color: #3462FA;
}
.msa-popup .msa-content {
max-height: 30%;
overflow: auto;
font-size:.9em;
text-align: center;
}
var form = document.getElementById('myForm');
var select = document.getElementById('mySelect')
select.onchange=function(e){
form.setAttribute('action', e.target.value);
}

Add a submit handler to the form, and if the action value starts with a #, set the window.location.hash manually, and return false; to keep the form from submitting and refreshing the page. Here's a codepen since this won't work within the code sandbox on SO - http://codepen.io/mcoker/pen/MpoYgJ
Seems like you're missing some code, too - there is no form#myForm or submit button, so added those. Please update your post with all of the relevant code.
var form = document.getElementById('myForm');
var select = document.getElementById('mySelect');
select.onchange = function(e) {
form.setAttribute('action', e.target.value);
}
form.onsubmit = function(e) {
var action = this.getAttribute('action');
if (action.substr(0,1) == '#') {
window.location.hash = this.getAttribute('action');
return false;
}
}
.msa-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.51);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.msa-overlay:target {
visibility: visible;
opacity: 1;
}
.msa-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 65%;
position: relative;
transition: all 5s ease-in-out;
}
.msa-popup h2 {
margin-top: 0;
color: #333;
font-family: Josefin Sans, sans-serif;
}
.msa-popup .msa-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-weight: bold;
text-decoration: none;
color: #333;
}
.msa-popup .msa-close:hover {
color: #3462FA;
}
.msa-popup .msa-content {
max-height: 30%;
overflow: auto;
font-size: .9em;
text-align: center;
}
<form id="myForm">
<label>payment plan?</label>
<select id="mySelect" name="payment-plan">
<option value="plan.html">day</option>
<option value="plan1.html">night</option>
<option value="#msa-popup1">special</option>
<option value="plan3.html">day and night</option>
<option value="plan4.html">weekly</option>
<option value="plan5.html">monthly</option>
<option value="plan6.html">Yearly</option>
</select>
<input type="submit">
</form>
<!-- pop up -->
<div id="msa-popup1" class="msa-overlay">
<div class="msa-popup">
<h2>For Sale?</h2>
<a class="msa-close" href="#">×</a>
<div class="msa-content">
what plan suits you? <br>
</div>
</div>
</div>
<!-- pop up ending -->

You can try this here:
https://jsfiddle.net/mikeydouglas/7hr5qp3n/10/
<label>payment plan?</label>
<select id="mySelect" name="payment-plan">
<option value="">Select a Plan...</option>
<option value="plan.html">day</option>
<option value="plan1.html">night</option>
<option value="#msa-popup1">special</option>
<option value="plan3.html">day and night</option>
<option value="plan4.html">weekly</option>
<option value="plan5.html">monthly</option>
<option value="plan6.html">Yearly</option>
</select>
<!-- pop up -->
<div id="msa-popup1" class="msa-overlay">
<div class="msa-popup">
<h2>For Sale?</h2>
<a class="msa-close" href="#">×</a>
<div class="msa-content">
what plan suits you? <br>
</div>
</div>
</div>
<!-- pop up ending -->
<script>
var mSelect = document.getElementById("mySelect");
mSelect.addEventListener("change", function() {
// var strUser = e.options[e.selectedIndex].value;
var popPage = mSelect.options[mSelect.selectedIndex].value;
alert("The page " +popPage+ "should open next if popups are not disabled")
window.open(popPage);
});
</script>

Multi select drop down with checkbox

can anybody help me on implementing multi select drop down with check box? I have referred below link example.
http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/
Problem with the sample provided above is only hard coded options are populating in the dropdown. I need it an empty drop down when page load. option will be assigned based on Ajax call response data i.e dynamically list will come from server. Also, drop down list has to refresh every time when server call made and response came for different events/scenarios.

You can try bellow sample code as startup:
<select id="ddlId"></select>
$.ajax({
url: 'apiurl',
type: 'GET',
dataType: 'json',
success: function(data) {
var dataObj=JSON.parse(data);
var optionHtml="";
for(var i=0;i<dataObj.length;i++){
optionHtml+='<option value="'+dataObj[i].ValueField+'">'+dataObj[i].TextField+'</option>';
}
$("#ddlId").html(optionHtml);
$('#ddlId').multiselect();
}
});

You can follow below code and get multi-select drop down with checkbox using jquery / ajax. additionally you should add jquery to work on this program.if you have any question regarding this please comment
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var expanded = false;
function showCheckBoxes(){
var checkboxes = document.getElementById("checkboxes");
if(!expanded){
checkboxes.style.display = "block";
expanded = true;
}else{
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
<script>
function getcategory() {
$.ajax({
type: "GET",
url: 'https://jsonplaceholder.typicode.com/posts',
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var checkboxes = document.getElementById("checkboxes");
for (var i = 0; i < data.length; i++) {
var node = document.createElement('div');
node.innerHTML = '<label id="'+ data[i].id +'"><input type="checkbox" id="'+ data[i].id +'"/>'+data[i].id +'</label>';
document.getElementById('checkboxes').appendChild(node);
}
},
error: function (msg) {
alert("error" + msg);
}
});
}
</script>
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
#checkboxes{
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color : #1e90ff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body onload="getcategory();">
<div>
<div class="multiselect">
<div class="selectbox" onclick="showCheckBoxes()">
<select>
<option>Select option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
</div>
</div>
</div>
</body>
</html>

<select multiple>
/*for without holding ctrl/command key*/
$('option').mousedown(function(e) {
e.preventDefault();
var originalScrollTop = $(this).parent().scrollTop();
console.log(originalScrollTop);
$(this).prop('selected', $(this).prop('selected') ? false : true);
var self = this;
$(this).parent().focus();
setTimeout(function() {
$(self).parent().scrollTop(originalScrollTop);
}, 0);
return false;
});
select {
width: 400px;
padding: 8px 16px;
}
select option {
font-size: 14px;
padding: 8px 8px 8px 28px;
position: relative;
color: #999;
}
select option:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
top: 0;
bottom: 0;
margin: auto;
left: 0px;
border: 1px solid #ccc;
border-radius: 2px;
z-index: 1;
}
select option:checked:after {
content: attr(title);
background: #fff;
color: black;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 8px 8px 8px 28px;
border: none;
}
select option:checked:before {
border-color: blue;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMC42MSA4LjQ4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzNlODhmYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFzc2V0IDg8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJfMSIgZGF0YS1uYW1lPSIxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHg9Ii0wLjAzIiB5PSI1LjAxIiB3aWR0aD0iNSIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljk3IDAuMDEpIHJvdGF0ZSg0NSkiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjUuMzYiIHk9Ii0wLjc2IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC44NiAtMy4yNikgcm90YXRlKDQ1KSIvPjwvZz48L2c+PC9zdmc+);
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
<option title="Option 1">Option 1</option>
<option title="Option 2">Option 2</option>
<option title="Option 3">Option 3</option>
<option title="Option 4">Option 4</option>
<option title="Option 5">Option 5</option>
<option title="Option 6">Option 6</option>
<option title="Option 7">Option 7</option>
<option title="Option 8">Option 8</option>
<option title="Option 9">Option 9</option>
<option title="Option 10">Option 10</option>
<option title="Option 11">Option 11</option>
<option title="Option 12">Option 12</option>
<option title="Option 13">Option 13</option>
<option title="Option 14">Option 14</option>
</select>

Use a unique javaScript and CSS for multiple components

I have a styled-select dropdown menu, and I created it's own .css and .js.
This is what happens when I use only one dropdown menu in a page, which works fine as expected:
jsFiddle OK
Instead when I use two dropdown menu it's a mess, and it's normal, because my .js file will do it's functions to all those dropdown menu which exists on the page. This is how it appears when I use two dropdown menu with the same .js and .css files:
jsFiddle NOT OK
Now my questions is how can I use the same .js and .css files for multiple dropdown's which all of them act as expected?
$(function () {
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select div').click(function () {
$('.styled-select select').show();
$('.styled-select select').attr('size', 5);
$('.styled-select select').focus();
});
$('.styled-select select').click(function () {
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select select').hide();
});
$('.styled-select select').focusout(function () {
$('.styled-select select').hide();
});
});
.styled-select select {
position: absolute;
background: transparent;
width: 420px;
padding-top: 5px;
font-size: 18px;
font-family: 'PT Sans', sans-serif;
color: black;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 1;
outline: none;
left: -7px;
}
.styled-select {
background: url('../img/campaignSelector.png') no-repeat right;
background-color: white;
width: 420px;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-position: 97% 50%;
}
.styled-select option {
font-size: 18px;
background-color: white;
margin-left: 3px;
}
::-webkit-scrollbar {
display: none;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:800px; height: 600px; background: grey;">
<div class="styled-select" style="left:-250px; top:90px; width:200px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">Marco P</option>
<option value="1">Marco F</option>
<option value="2">Daniele</option>
<option value="3">Cristina</option>
<option value="4">Angine</option>
</select>
</div>
<div class="styled-select" style=" width:200px; left:50px; top:48px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">ReshaD</option>
<option value="1">Rasheed</option>
<option value="2">Reza</option>
<option value="3">Davin</option>
<option value="4">Ariya</option>
</select>
</div>
</div>

To make your code work for multiple instances of the .styled-select container you need to use $(this) to reference the element which is raising the event and then use closest() to get the nearest parent .style-select. From there you can use find() to get the required element. Try this:
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').each(function() {
var $container = $(this).closest('.styled-select');
$(this).html($container.find('select option:selected').text());
});
$('.styled-select div').click(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').show().attr('size', 5).focus();
});
$('.styled-select select').click(function() {
var $container = $(this).closest('.styled-select');
var text = $container.find('select option:selected').text();
$container.find('div').html(text);
$container.find('select').hide();
});
$('.styled-select select').focusout(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').hide();
});
Updated fiddle

How to design step progress bar using jquery,css

I spent 3 days. I tried to design step by step progress bar like below.
====(discount 10 %)======(discount 20 %)=====(discount 30 %)========
fill it dynamically how can i do that i searched on google every thing i tried to customize but not success so far.
Thanks

I've just made this to inspire you (not sure if it's what you try to do).
$(document).ready(function() {
$('#discount').on('change', function() {
$('#discount-bar').css({'width' : $(this).val() + '%'});
});
});
select {
margin-bottom: 12px;
}
.discount-bar-container {
position: relative;
width: 400px;
height: 30px;
border: 1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.discount-bar-container .discount-bar {
position: absolute;
display: block;
height: 100%;
width: 0;
background-color: red;
transition: width 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="discount">Choose a value :</label>
<select name="discount" id="discount">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<div class="discount-bar-container">
<div class="discount-bar" id="discount-bar"></div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Dropdown menu hover class not removing - javascript

Related

How to set cloning on select?

when submtting form, i do not want the page to load when pop up appears

Multi select drop down with checkbox

Use a unique javaScript and CSS for multiple components

How to design step progress bar using jquery,css

Categories

Resources