I am trying to make a dropdown based off of some dynamically generated radio inputs that i cannot control. I have it working in a codepen, but those radio inputs are not being dynamically generated. I feel like I am close, but may be having some syntax issues. Any suggestions?
jQuery:
(function () {
return $('.cart-dropdown-select').each(function (idx, el) {
var $select, $trigger, $radio;
$select = $(el);
$trigger = $select.find('.trigger');
$radio = $select.find(".radio");
$select.removeClass("is-open");
$select.on("click", function (e) {
return $select.toggleClass("is-open");
});
$select.on("click", "input[name='radio']", function (e) {
console.log($(this));
$select.removeClass("no-selection");
return $select.toggleClass("is-open");
$(this).parent().addClass("checked");
});
});
}).call(this);
SCSS:
.cart-dropdown-select {
position: relative;
display: inline-block;
padding: 6px 24px 6px 6px;
box-shadow: 0 0 0 1px #000;
border-radius: 4px;
&.no-selection {
label:first-of-type {
display: block;
height: auto;
}
.radio:first-of-type {
display: block;
}
}
.radio, .enabled{
display: none;
}
&.is-open {
input + label {
margin-top: 3px;
&:first-of-type {
margin-top: 0;
}
&::after {
content: "\A"; // hack to force linebreak
white-space: pre;
}
}
.radio, .enabled{
display: block;
}
}
&.is-open input,
&.is-open input + label,
input:checked,
input:checked + label, .checked{
display: block;
height: auto;
}
input,
input + label {
display: block;
height: 0;
overflow: hidden;
}
&::after {
position: absolute;
content: '';
display: block;
width: 12px;
height: 12px;
border: 6px solid #fff;
border-top-color: blue;
top: 11px;
right: 6px;
cursor: pointer;
font-size: 9px;
box-sizing: border-box;
}
input[type="radio"] {
display: none;
opacity: 0;
width: 0;
height: 0;
+ label {
position: relative;
color: blue;
&:hover {
color: grey;
cursor: pointer;
}
}
&:disabled {
+ label {
color: blue;
padding-left: 0;
&::before {
display: none;
}
}
}
&:checked {
+ label {
color: grey;
&::before {
background: $pop;
}
}
}
}
}
HTML (layout example):
<div class='cart-dropdown-select is-open no-selection'>
<div class="radio">
<input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
<label for='disabled'>Select Option</label>
</div>
<div class="radio">
<input id='foo1' name='radios' type='radio' value='foo1'>
<label for='foo1'>Foo1</label>
</div>
<div class="radio">
<input id='foo2' name='radios' type='radio' value='foo2'>
<label for='foo2'>Foo2</label>
</div>
<div class="radio">
<input id='foo3' name='radios' type='radio' value='foo3'>
<label for='foo3'>Foo3</label>
</div>
</div>
Also a link to the codepen, again this content in the codepen is not being dynamically driven, so it works fine there.
https://codepen.io/ascarb1/pen/LKdKjE
I ended up changing a bit of the HTML around so the bind can happen within a class that is not being dynamically loaded. This seems to have worked. Feel free to leave feedback if there is still a better solution:
jQuery:
(function () {
return $('.cart-dropdown-select').each(function (idx, el) {
var $select, $trigger, $radio;
$select = $(el);
$trigger = $select.find('.trigger');
$radio = $(".radio");
$select.removeClass("is-open");
$select.on("click", function (e) {
return $select.toggleClass("is-open");
});
$select.on("click", ".enabled input", function() {
$select.toggleClass("no-selection");
$(this).parentsUntil($radio).toggleClass("checked");
return $select.toggleClass("is-open");
});
});
}).call(this);
HTML (Example):
<div class='cart-dropdown-select is-open no-selection'>
<input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
<label for='disabled'>Select Option</label>
<div class="radio">
<label class="enabled" for='foo1'>
<input id='foo1' name='radios' type='radio' value='foo1'>
Foo1</label>
</div>
<div class="radio">
<label class="enabled" for='foo2'>
<input id='foo2' name='radios' type='radio' value='foo2'>
Foo2</label>
</div>
<div class="radio">
<label class="enabled" for='foo3'>
<input id='foo3' name='radios' type='radio' value='foo3'>
Foo3</label>
</div>
</div>
The SCSS did not change.
Related
Hi so I have this "product" page (on Fiddle) where I have multiple radio boxes in two classes .choosesize and .choosetea. I want to set up my code where if the 8oz radio button is selected then one set of pictures will appear for all the tea selections and if the 16oz radio button is selected another set of pictures will appear for the tea selections.
I have assigned the small and big images to each tea option but I do not know how to show the small pictures if the small 8oz option is selected.
While you don't have all the "combined" images, I have added a possible solution.
var size = "small"
var teatype = "green"
$('.choosetea input').on('click', function() {
teatype = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
So this will comebine size and teatype, So each image will have the data-image where it should be size_teatype
$(document).ready(function() {
var size = "small"
var teatype = ""
$('.choosetea input').on('click', function() {
teatype = "_"+$(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
//local storage color
//local storage size
// add the value of the added radio boxes in the text box
$('.radios1').change(function(e) {
var selectedValue = parseInt($(this).val());
selectedValue += parseInt($(".radios2").val());
$('#amount').val('$' + selectedValue)
});
//add to cart
});
const sizeSelector = 'input:radio[id=small]';
const colorSelector = 'input:radio[id=green]';
const cartSelector = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;
function validityCheck() {
let $size = $(`${sizeSelector}`);
let $color = $(`${colorSelector}`);
let size_flag = $size.is(':checked');
let color_flag = $color.is(':checked');
$('#itemdv1A').toggle(size_flag && color_flag) && $('#itemdv2A').toggle(size_flag && color_flag) && $('#yourbutton').toggle(size_flag && color_flag);
}
});
const sizeSelector1 = 'input:radio[id=small]';
const colorSelector1 = 'input:radio[id=chamomile]';
const cartSelector1 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const CHAMOMILE = 1;
function validityCheck() {
let $size1 = $(`${sizeSelector1}`);
let $color1 = $(`${colorSelector1}`);
let size_flag1 = $size1.is(':checked');
let color_flag1 = $color1.is(':checked');
$('#itemdv1B').toggle(size_flag1 && color_flag1) && $('#itemdv2B').toggle(size_flag1 && color_flag1) && $('#yourbutton').toggle(size_flag1 && color_flag1)
};
});
const sizeSelector2 = 'input:radio[id=small]';
const colorSelector2 = 'input:radio[id=oolong]';
const cartSelector2 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const OOLONG = 2;
function validityCheck() {
let $size2 = $(`${sizeSelector2}`);
let $color2 = $(`${colorSelector2}`);
let size_flag2 = $size2.is(':checked');
let color_flag2 = $color2.is(':checked');
$('#itemdv1C').toggle(size_flag2 && color_flag2) && $('#itemdv2C').toggle(size_flag2 && color_flag2) && $('#yourbutton').toggle(size_flag2 && color_flag2);
}
});
document.querySelector('#yourbutton').onclick = function() {
document.querySelector('#itemscart').style.display = "none"
};
/* Basic Styling */
.container {
width: 1200px;
top: 300px;
left: 50px;
padding: 15px;
display: flex;
position: absolute;
}
/* Columns */
.columnleft {
width: 220%;
position: relative;
margin-left: 30px;
}
.columnright {
width: 120%;
top: 10px;
margin-left: 80px;
display: block;
}
/* Left Column */
.columnleft img {
width: 100%;
position: absolute;
opacity: 0;
transition: all 0.3s ease;
}
.columnleft img.active {
opacity: 1;
}
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
/* Product Color */
.tea-type {
margin-bottom: 30px;
}
.choosetea div {
display: block;
margin-top: 10px;
}
.label {
width: 150px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosetea input {
display: none;
}
.choosetea input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosetea input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosetea input#green+label span {
background-color: #90978b;
}
.choosetea input#chamomile+label span {
background-color: #ffd4a1;
}
.choosetea input#oolong+label span {
background-color: #948e9e;
}
.choosetea input:checked+label span {
background-image: url(check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* SIZE */
.tea-type {
margin-bottom: 30px;
}
.choosesize div {
display: block;
margin-top: 10px;
}
.label {
width: 100px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosesize input {
display: none;
}
.choosesize input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosesize input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosesize input#small+label span {
background-color: #252525;
}
.choosesize input#big+label span {
background-color: #1d1d1d;
}
.choosesize input:checked+label span {
background-image: url(https://noychat.github.io/Folia-Website/check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* Product Price */
.product-price {
margin-top: 40px;
display: flex;
align-items: center;
}
.product-price span {
font-size: 26px;
font-weight: 300;
color: #43474D;
margin-right: 20px;
}
.cart-btn {
display: inline-block;
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.cart-btn:hover {
background-color: black;
}
.cart-btn2 {
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
width: 20px;
position: absolute;
}
#amount {
margin-right: 10px;
display: inline-block;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 40px;
padding-left: 10px;
transition: all .5s;
}
#shoppingcart {
width: 360px;
height: 300px;
/* border: 1px solid red; */
}
.item {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 200px;
height: 30px;
padding-left: 10px;
transition: all .5s;
float: left;
}
.item1 {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 30px;
padding-left: 10px;
transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>
<!--close all header portion-->
<div class="container">
<!-- Left Column---Tea Images -->
<div class="columnleft">
<img data-image="oolong" src="https://noychat.github.io/Folia-Website/oolongbig.png" alt=" Big Oolong Can">
<img data-image="chamomile" src="https://noychat.github.io/Folia-Website/chamomilebig.png" alt="Big Chamomile Can">
<img data-image="green" class="active" src="https://noychat.github.io/Folia-Website/greenteabig.png" alt="Big Green Tea Can">
<img data-image="small" class="active" src="https://noychat.github.io/Folia-Website/foliasmall.png" alt="Small Example Can">
<img data-image="big" src="https://noychat.github.io/Folia-Website/foliabig.png" alt="Big Example Can">
<img data-image="small_chamomile" src="https://noychat.github.io/Folia-Website/chamomilesmall.png" alt="Small Chamomile Can">
<img data-image="small_oolong" src="https://noychat.github.io/Folia-Website/oolongsmall.png" alt="Small Oolong Can">
<img data-image="small_green" src="https://noychat.github.io/Folia-Website/greenteasmall.png" alt="Small Green Tea Can">
</div>
<!-- Right Column -->
<div class="columnright">
<!-- Product Description -->
<div class="product-description">
<span>Folia Tea Collection</span>
<h1>Signature Teas</h1>
<p>We source our tea leaves from around the world. Try our many selections of teas and you will taste the difference.</p>
</div>
<!-- Product Configuration -->
<div class="product-configuration">
<!-- Tea Size -->
<div class="tea-type">
<h3>Size</h3>
<div class="choosesize">
<div>
<input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
<label for="small"><span></span></label>
<div class="label">8 oz</div>
</div>
<div>
<input data-image="big" type="radio" id="big" name="size" value="40" class="radios1">
<label for="big"><span></span></label>
<div class="label">16 oz</div>
</div>
</div>
<!--CLOSE TEA Size-->
<!-- Tea Type -->
<div class="tea-type">
<h3>Tea Type</h3>
<div class="choosetea">
<div>
<input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2">
<label for="green"><span></span></label>
<div class="label">Green Tea</div>
</div>
<div>
<input data-image="chamomile" data-image1="small_chamomile" type="radio" id="chamomile" name="color" class="radios2" value="1">
<label for="chamomile"><span></span></label>
<div class="label">Chamomile Tea</div>
</div>
<div>
<input data-image="oolong" data-image1="small_oolong" type="radio" id="oolong" name="color" class="radios2" value="2">
<label for="oolong"><span></span></label>
<div class="label">Oolong Tea</div>
</div>
</div>
</div>
<!--CLOSE TEA TYPE-->
<h3>Product Pricing</h3>
<div class="product-price">
<input type="text" name="amount" id="amount">
<button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>
</div>
</div>
</div>
<!--close CONTAINER-->
<div id="shoppingcart">
<h3>Shopping Cart</h3>
<h5>Item and Price</h5>
<div id="itemscart">
<div id="itemdv1A" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>
<div id="itemdv2A" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1B" style="display: none"> <input type="text" name="amount" class="item" value="8oz Chamomile Tea"></div>
<div id="itemdv2B" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1C" style="display: none"> <input type="text" name="amount" class="item" value="8oz Oolong Tea"></div>
<div id="itemdv2C" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<button style="display: none" type="button" class="cart-btn2" id="yourbutton" name="remove" value="10">x</button>
</div>
</div>
Hello Stackoverflow community, hope that you're doing well, what I'm trying to do is when I click the switch button I want it to hide certain inputs and show others, my code is a form to add students and teachers, since there are cummon inputs I tought about hide the uncummon one when I press the switch button and when I click it again do the opposite but all of that seem to be failed, I can only hide some and when I click it again it won't work, here what I did:
The Jquery code:
$(document).ready(function(){
$('.teacher').hide();
$('.switch').click(function(){
$('.student').hide();
$('.teacher').show();
});
});
The HTML code:
<label>Student </label>
<label class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</label>
<label> Teacher</label>
$('.teacher').hide();
$('.switch').click(function() {
$('.student').toggle();
$('.teacher').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='student'>Student</div>
<div class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</div>
<div class='teacher'>Teacher</div>
Use $(".teacher, .student").toggle();
Or, if needed, for more granular control you could always get the current checkbox state using
const isChecked = this.checked; // boolean`
Example:
jQuery($ => {
$(".teacher").hide();
$("#switchVal").on("input", function() {
$(".teacher, .student").toggle();
});
});
.toggler {
display: inline-flex;
gap: 0 5px;
cursor: pointer;
}
.toggler-checkbox {
display: inline-block;
width: 35px;
height: 15px;
background: #444;
border-radius: 1.2em;
}
.toggler-checkbox::before {
content: "";
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: #0bf;
border-radius: 1em;
transition: transform 0.3s;
}
.toggler input:checked ~ .toggler-checkbox::before {
transform: translateX(20px);
}
.toggler-label {
user-select: none;
}
.toggler-label:nth-of-type(1) {
order: -1;
color: #0bf;
}
.toggler input:checked ~ .toggler-label:nth-of-type(1) {
color: inherit;
}
.toggler input:checked ~ .toggler-label:nth-of-type(2) {
color: #0bf;
}
<label class="toggler">
<input type="checkbox" id="switchVal" value="0" hidden>
<span class="toggler-checkbox"></span>
<b class="toggler-label">Student</b>
<b class="toggler-label">Teacher</b>
</label>
<ul>
<li class="student">Student: Anna</li>
<li class="student">Student: John</li>
<li class="teacher">Teacher: Mark</li>
<li class="student">Student: Tara</li>
<li class="teacher">Teacher: Zack</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<label for="seeker" class="checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
I have multiple HTML radio inputs which are wrapped around labels (https://i.imgur.com/GLdqodq.png) when a radio is selected for say input name "designation" I'd like to add a border color to the label of the radio button that was selected and remove the border from the other labels (https://i.imgur.com/LOMlBUP.png), here's the the JS code I tried using but for some reason when a radio button is unchecked JS can't seem to detect the event.
const radios = document.querySelectorAll('.checkbox input')
radios.forEach((radio) => {
radio.addEventListener('change', e => {
if (e.target.checked) {
// logic to add label border
} else {
// logic to remove label border
}
})
})
I know this can be done using the CSS plus (+) operator but seems like that would require the label to preceded the input, something I wouldn't want to do. However I'm open to using a CSS method as long as the markup wouldn't have to be changed.
const inputs= document.body.querySelectorAll("input")
document.addEventListener("change", (e)=>{
inputs.forEach(input=>{
if(input.checked){
input.labels[0].style="border-style: solid; padding: 10px;"
}
if(!input.checked){
input.labels[0].style=""
}
})
})
here is the js logic
You can also try this code snippet. I have also provided the required styling if you want.
document.querySelector(".first-checkbox").addEventListener('click', function(){
document.querySelector(".first-checkbox").classList.add("active");
document.querySelector(".second-checkbox").classList.remove("active");
})
document.querySelector(".second-checkbox").addEventListener('click', function(){
document.querySelector(".second-checkbox").classList.add("active");
document.querySelector(".first-checkbox").classList.remove("active");
})
.first-checkbox,.second-checkbox{
border:1px solid #D3D3D3;
border-radius:5px;
padding:5px;
}
.checkbox-container{
width:80%;
display:flex;
justify-content:space-around;
padding:20px;
border:1px solid #C0C0C0;
border-radius:5px;
}
.active{
border:1px solid black;
border-radius:5px;
padding:5px;
}
<div class="checkbox-container">
<label for="seeker" class="first-checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="second-checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
</div>
You can simply do it css using input:checked selector
Take an example from below code and codepen link https://codepen.io/naren-irain/pen/XWXWWqq
.radiobox {
display: inline-block;
cursor: pointer;
user-select: none;
}
.radiobox input {
position: absolute;
opacity: 0;
}
.radiobox .check {
background: #fff;
border: 1px solid #979797;
border-radius: 50%;
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
margin-right: 5px;
vertical-align: top;
}
.radiobox span, .radioTab span, .checkbox span {
display: inline-block;
vertical-align: top;
}
.radiobox .check i,
.radioTab .check i {
background: #0db837;
border-radius: 50%;
display: block;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
opacity: 0;
transform: scale(0.75);
transition: all 0.3s;
}
.radiobox input:checked+.check,
.radioTab input:checked+ span .check {
border-color: #5cb85c;
}
.radiobox input:checked+.check i,
.radioTab input:checked+ span .check i {
opacity: 1;
transform: scale(1);
}
<h4>Select any one option</h4>
<label class="radiobox" for="one">
<input type="radio" id="one" name="designation" value="one" />
<span class="check"><i></i></span>
<span>This is one option</span>
</label>
<br/>
<br/>
<label class="radiobox" for="two">
<input type="radio" id="two" name="designation" value="two" />
<span class="check"><i></i></span>
<span>Never think this is an option</span>
</label>
I have a requirement to design the dropdown with multiselect option with checkbox using ASP.NET controls and also i need to select checkboxes while binding the values on the dropdown. Please help
you can use following open source library to get your goal its simple and really amazing
http://wenzhixin.net.cn/p/multiple-select/
Please check this, I developed this similar dropdown for my project.
//Multiple Dropdown Select
$('.multiDrop').on('click', function (e) {
e.stopPropagation();
$(this).next('ul').slideToggle();
});
$(document).on('click', function (){
if (!$(event.target).closest('.wrapMulDrop').length) {
$('.wrapMulDrop ul').slideUp();
}
});
$('.wrapMulDrop ul li input[type="checkbox"]').on('change', function () {
var x = $('.wrapMulDrop ul li input[type="checkbox"]:checked').length;
if (x != "") {
$('.multiDrop').html(x + " " + "selected");
} else if (x < 1) {
$('.multiDrop').html('Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>');
}
});
.wrapMulDrop {
width: 50%;
display: inline-block;
position: relative;
}
.multiDrop {
width: 100%;
padding: 5%;
background-color: transparent;
border: 1px solid #ccc;
color: #999;
text-align: left;
}
.multiDrop:focus {
outline: none;
}
.wrapMulDrop ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
right: 0;
z-index: 5;
display: none;
}
.wrapMulDrop ul li {
list-style-type: none;
background-color: #e5801d;
padding: 1% 6%;
}
.wrapMulDrop ul li:hover {
background-color: #33414e;
}
.wrapMulDrop ul li label {
width: 100% !important;
cursor: pointer;
margin: 0 !important;
color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapMulDrop">
<button type="button" class="multiDrop">Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>
</button>
<ul>
<li>
<input type="checkbox" id="list1">
<label for="list1">Template 1</label>
</li>
<li>
<input type="checkbox" id="list2">
<label for="list2">Template 2</label>
</li>
<li>
<input type="checkbox" id="list3">
<label for="list3">Template 3</label>
</li>
<li>
<input type="checkbox" id="list4">
<label for="list4">Template 4</label>
</li>
</ul>
</div>
I wish to make my own select.
Actually my select looks like this :
JS Fiddle
and is it coded like this :
<p>Title</p>
<form>
<input type="color" onchange="colorisPanneau(value);pageSuivante();" name="coloris_panneau" list="liste_color3" id="coloris_panneau" value="#C5B9A9" class="formc" style="height:24px;width:202px;">
<datalist id="liste_color3">
<option value="#FFFFFF">
<option value="#999999">
<option value="#000000">
<option value="#582810">
</datalist>
</form>
And i want to make it look like that :
How can i do this ?
What do i need to do to be able to personalize the interface in my combobox ?
Where can i find documentation to be able to do so ?
Thank you very much :)
The datalist cannot be modified with css, even if you could with some css-magic, you could never get multiple items inside of the datalist options. The only solution is to create a select box from scratch.
I was bored so I made you something you can start with:
$('html').on("click", function(e) {
$('.color-picker').removeClass('open');
});
$(document).on("click", ".color-value", function(e) {
e.stopPropagation();
if ($('.color-picker').hasClass('open')) {
$('.color-picker').removeClass('open');
} else {
$('.color-picker').addClass('open');
}
});
$(document).on("click", ".list-item", function() {
var color = $(this).data('color');
$('#color-input').val(color);
$('.color-value').html($(this).html());
//This is now the value of your hidden input field
$('#value').html(color);
});
* {
box-sizing: border-box;
}
.color-picker {
height: 30px;
width: 150px;
overflow: hidden;
color: #666;
background: #FFF;
}
.open {
overflow: visible;
;
}
.list {
border: 1px solid #CCC;
border-top: none;
background: #FFF;
}
.list-item {
padding: 5px;
cursor: pointer;
}
.list-item:hover {
background: #f1f1f1;
}
.list-item>span {
display: inline-block;
vertical-align: middle;
height: 20px;
line-height: 20px;
}
.list-item>span:first-child {
width: 20px;
margin-right: 5px;
}
.color-value {
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 100%;
cursor: pointer;
border: 1px solid #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color-picker">
<input id="color-input" type="hidden" name="coloris_panneau" value="" />
<div class="color-value list-item">Select your color</div>
<div class="list">
<div class="list-item" data-color="#edae0e">
<span style="background:#edae0e;"></span>
<span>Yellow</span>
</div>
<div class="list-item" data-color="#ff0000">
<span style="background:#ff0000;"></span>
<span>Red</span>
</div>
<div class="list-item" data-color="#336699">
<span style="background:#336699;"></span>
<span>Blue</span>
</div>
</div>
</div>