Currently, I have a dropdown list and 1-25 values in the dropdown.
The current one is I want to make a checkbox for those values instead of choosing multiple.
Is there any way to add a checkbox for those?
var mtf = document.getElementById('affectedwaferid').selectedOptions;
var affectedwf = Array.from(mtf).map(({ value }) => value);
//alert(affectedwf);
document.getElementById("selected-result").innerHTML = affectedwf;
<div id="afwid">
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID : <span id="selected-result"></span></label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
<option value="" selected > Select Quantity</option>
<?php
//echo $cbo_oorigsite;
?>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</p>
</div>
What you want is a MultiSelect. You can implement it on your own as shown here, or you can import a library:
https://www.cssscript.com/multi-select-dropdown-picker/
Firstly, your question is not very clear.
Anyway, I think you want something like below to select the quatity.
Try below and amend as you required:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<style>
h1 {
color: green;
}
.multipleSelection {
width: 300px;
background-color: #bcc2c1;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkBoxes {
display: none;
border: 1px #8df5e4 solid;
}
#checkBoxes label {
display: block;
}
#checkBoxes label:hover {
background-color: #4f615e;
}
</style>
<body>
<form>
<div class="multipleSelection">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select Quantity</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkBoxes">
<label for="first">
<input type="checkbox" id="first" class="chb" />
1
</label>
<label for="second">
<input type="checkbox" id="second" class="chb" />
2
</label>
<label for="third">
<input type="checkbox" id="third" class="chb" />
3
</label>
<label for="fourth">
<input type="checkbox" id="fourth" class="chb" />
4
</label>
</div>
</div>
</form>
<script>
let show = true
$('.chb').change(function () {
$('.chb').prop('checked', false)
$(this).prop('checked', true)
})
function showCheckboxes() {
if (show) {
$('#checkBoxes').hide()
show = false
} else {
$('#checkBoxes').show()
show = true
}
}
</script>
</body>
</html>
Related
I want to make 2 function select and delete, but something wrong happen when I click select it triggers function delete and I see the value NaN on the console. How can I fix that problem?
var collect = document.getElementById('collect');
collect.addEventListener('change', onChange);
collect.addEventListener('click', onDelete);
function onChange(event) {
var changeButton = event.target;
i = parseInt(changeButton.dataset.select);
console.log(i);
}
function onDelete(event) {
var deleteButton = event.target;
i = parseInt(deleteButton.dataset.delete);
console.log(i);
}
.card {
width: 300px;
height: 80px;
background-color: blue;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: start;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="collect">
<div class="card">
<button data-delete='1'>Delete</button>
CARD 1
<select name="" id="" data-select='1'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='2'>Delete</button>
CARD 2
<select name="" id="" data-select='2'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='3'>Delete</button>
CARD 3
<select name="" id="" data-select='3'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
Additional,
Second question: I still don't know the best way to delete the card. I did used jquery $("button[data-delete='" + i + "']").parents('.card').remove();. But it's seem not good:(. Could you help me?
A click on select control fires the click event and runs onDelete handler (because it listens click event). So, you need to prevent handling clicks on select control within onDelete handler. It may be implemented by checking type of a clicked element using nodeName property.
To remove a card you could use solution from the How to remove the parent element using plain javascript topic. So, the result code will be as following.
var collect = document.getElementById('collect');
collect.addEventListener('change', onChange);
collect.addEventListener('click', onDelete);
function onChange(event) {
var changeButton = event.target;
if (changeButton.nodeName !== 'SELECT')
return false;
i = parseInt(changeButton.dataset.select);
console.log(i);
}
function onDelete(event) {
var deleteButton = event.target;
if (deleteButton.nodeName !== 'BUTTON')
return false;
i = parseInt(deleteButton.dataset.delete);
console.log(i);
deleteButton.parentNode.parentNode.removeChild(deleteButton.parentNode);
}
.card {
width: 300px;
height: 80px;
background-color: blue;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: start;
}
<div id="collect">
<div class="card">
<button data-delete='1'>Delete</button> CARD 1
<select name="" id="" data-select='1'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='2'>Delete</button> CARD 2
<select name="" id="" data-select='2'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='3'>Delete</button> CARD 3
<select name="" id="" data-select='3'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
Also it is possible to separate event sources using classes and solution from the Native addEventListener with selector like .on() in jQuery topic.
Good luck and happy coding! ;)
$(".delet-btn").click(function(){
$(this).closest(".card").remove();
});
.card {
width: 300px;
height: 80px;
background-color: blue;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: start;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="collect">
<div class="card">
<button data-delete='1' class="delet-btn">Delete</button>
CARD 1
<select name="" id="" data-select='1'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='2' class="delet-btn">Delete</button>
CARD 2
<select name="" id="" data-select='2'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button data-delete='3' class="delet-btn">Delete</button>
CARD 3
<select name="" id="" data-select='3'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
for your Second question i use jquery to delete card.
In JavaScript there are MANY ways to achieve the same problem, I've done a simple snippet in Plain JavaScript to solve both problems you've...
function changeOption (e) {
alert("New Option is: " + e.target.value)
}
.card {
width: 300px;
height: 80px;
background-color: blue;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: start;
}
<div id="collect">
<div class="card">
<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete</button>
CARD 1
<select onChange="changeOption(event)" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete</button>
CARD 2
<select onChange="changeOption(event)" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="card">
<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete</button>
CARD 3
<select onChange="changeOption(event)" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes('dLang')">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div class="checkboxes" id="dLang" style="overflow-x: hidden;">
<label for="three"><input type="checkbox" id="three"/>Czech</label>
<label for="three"><input type="checkbox" id="three"/>Danish</label>
<label for="three"><input type="checkbox" id="three"/>Dutch</label>
</div>
</div>
#This code working fine but i want to add scrollbar here.Can any one help?#
Take a look at this snippet. Is this what you need?
.multiSelect {
height: 100px;
overflow: scroll;
overflow-x: hidden;
}
<select class="multiSelect" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
(Hold down CTRL to select multiple elements)
This is you should need to check : http://www.jqueryfaqs.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-using-jQuery.aspx
<script type="text/javascript">
$(function () {
$('[id*=your id name ]').multiselect({
includeSelectAllOption: true
});
});
</script>
I'm trying to copy a section of a webpage when a link is clicked so that the section is recreated underneath the previous section just like how this works in this image as example-
I'm doing this on google apps script and here is my code
code.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('HTML')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
HTML.html
<html>
<head>
<base target="_top">
<style type="text/css">
.contentBackground {
background-color: #D8D8D8;
clear: left;
width: 60%;
margin: auto;
height: 200px display: block;
}
.uploadFile p {
text-align: center;
padding: 20px;
color: red;
}
.content p {
text-align: center;
color: red;
padding: 7px;
}
.dropDown p {
text-align: center;
padding: 40px;
margin-left: 8px;
height:;
}
.moreFiles {
text-align: center;
}
</style>
</head>
<body>
<div class="contentBackground">
<div class="uploadWrapper">
<div class="fileUpload">
<div class="uploadFile">
<p>Upload File: <span style="color:black"><input type="file" name="uploadField" /></span></p>
</div>
<div class="content">
<p>Width(Inch) <input type="text" style="width: 100px"> Height(Inch) <input type="text" style="width: 100px"> Quantity <input type="text" style="width: 100px"></p>
</div>
</div>
</div>
<div class="dropDown">
<p>
Material <select style="max-width: 10%;">
<option value="Paper">Paper</option>
<option value="Vinyl Banner">Vinyl Banner</option>
<option value="Adhesive Vinyl">Adhesive Vinyl</option>
<option value="Polygloss">Polygloss</option>
<option value="Translucent Vinyl">Translucent Vinyl</option>
<option value="Static Cling Clear">Static Cling Clear</option>
<option value="Static Cling White">Static Cling White</option>
<option value="Reverse Static Cling">Reverse Static Cling</option>
<option value="Outdoor Paper">Outdoor Paper</option>
<option value="Backlit Film">Backlit Film</option>
<option value="Foam">Foam</option>
<option value="Coroplast">Coroplast</option>
<option value="Corrugated Board">Corrugated Board</option>
<option value="Sintra">Sintra</option>
<option value="Canvas">Canvas</option>
<option value="Fabric">Fabric</option>
<option value="All Cling">All Cling</option>
</select>
Lamination <select>
<option value="None">None</option>
<option value="Matte">Matte</option>
<option value="Gloss">Gloss</option>
<option value="Lexan">Lexan</option>
<option value="Erasable">Erasable</option>
</select>
Mounting <select>
<option value="3/16" Foam">3/16" Foam</option>
<option value="3/16" Gator">3/16" Gator</option>
<option value="1/8" Sintra">1/8" Sintra</option>
<option value="24point Card">24point Card</option>
<option value="50point Card">50point Card</option>
<option value="Adhesive Back">Adhesive Back</option>
<option value="MDF">MDF</option>
<option value="Coroplast">Coroplast</option>
<option value="Masonite">Masonite</option>
<option value="020 Styrene">020 Styrene</option>
<option value="040 Styrene">040 Styrene</option>
<option value="060 Styrene">060 Styrene</option>
<option value="080 Styrene">080 Styrene</option>
<option value="Corrugated Board">Corrugated Board</option>
</select>
Ink <select>
<option value="Indoor">Indoor</option>
<option value="Outdoor">Outdoor</option>
</select>
</p>
</div>
</div>
<div class="moreFiles">
Add another file?
</div>
</body>
</html>
If you opt to use jQuery, then you can use the .clone() method.
$("#add").on("click", function () {
var $last = $(".contentBackground").last();
$last.clone().insertAfter($last);
});
JSFiddle
I am very new to code, but I was wondering what direction I should go with this code. I am going to have a drop down menu where you can pick a color and an image will be displayed in the preview box. I need each of the color1 color2 and color3 images be displayed all at the same time in the preview box. They also need to be able to change when other colors are picked. If anyone could give some sort of direction that would be awesome :) oh I also have my image set up in a sprite
Here is the code that I have so far :
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
</style>
<div id="preview">
<img id="image" src="image.png" />
</div>
<form action="" id="opts">
<label for="color1">Front Color</label>
<select name="color1" id="color1">
<option value="white" selected="">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color2">Middle Color</label>
<select name="color2" id="color1">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color3">Back Color</label>
<select name="color3" id="color1">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
</form>
<script>
function setcolor1() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("color1").onchange = setcolor1;
}
</script>
I recommend that you write JS or jQuery(whichever you prefer) to change background color onhover or onclick, that way your image looks like different color a user clicks on color button. Buttons improve the UX (user-experience) and have feel much better than strolling through option list.
Also
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
is not good for responsive web design/development
instead you should put the following:
html
{
width:100%;
}
#preview
{
width:10.5% (this percentage may change depending on how big you want this to cover your page)
max-width:100%;
}
I think using jquery you can solve this .You have used same id for all select boxes need to change.I suggest to use the code like-
**html**
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<div id="preview">
<img id="image" src="image.png" />
</div>
<form action="" id="opts">
<label for="color1">Front Color</label>
<select name="color1" id="color1">
<option value="white" selected="">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color3">Back Color</label>
<select name="color3" id="color3">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
</form>
**css**
* { margin: 0; padding: 0; box-sizing: border-box; }
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
#image{
width:100px;
}
**jquery**
$(function(){
$('#color1').change(function()
{
var e = document.getElementById("color1");
var col = e.options[e.selectedIndex].value;
$('#preview').css('color', col);
src='a.png';
$('#preview img').attr("src", src);
});
$('#color3').change(function()
{
var e = document.getElementById("color3");
var col = e.options[e.selectedIndex].value;
$('#preview').css('background-color', col);
});
});
jsfiddle link
I have been trying to create a form that having 4 elements. One is a dropdown box of checkboxes and the other are simple checkboxes. I am trying to place them one below the other. The difficulty is when the dropdown with the checkboxes are clicked the other dropdown slide down. On closing the dropdown with the checkboxes they slide up again. I am trying to place them one below the other, so that if the dropdown with checkboxes is clicked the other simply become invisible and not slide down. when the the dropdown of checkboxes is closed the remaining dropdown simply show up. Could someone please help me on this. I am trying to emulate something like the filters on luxuryretreats.com
Below is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.visibility;
if (showstatus == 'hidden') {
document.getElementById('ScrollCountry').style.visibility = "visible";
document.getElementById('Scrollguests').style.visibility = "hidden";
document.getElementById('Scrollminprice').style.visibility = "hidden";
document.getElementById('Scrollmaxprice').style.visibility = "hidden";
} else {
document.getElementById('ScrollCountry').style.visibility = 'hidden';
document.getElementById('Scrollguests').style.visibility = "visible";
document.getElementById('Scrollminprice').style.visibility = "visible";
document.getElementById('Scrollmaxprice').style.visibility = "visible";
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div id="ScrollCountry"
style="height: 120; width: 150px; overflow: auto; border: 2px solid orange; visibility:hidden;border-radius:10px;">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos">Turks & Caicos<br>
</div>
<br />
<div id = "Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id = "n4" value="10">8 - 10</option>
<option id = "n5" value="30">10+</option>
</select>
</div>
<br />
<div id = "Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id = "mn4" value="500">500</option>
<option id = "mn5" value="600">600</option>
</select>
</div>
<br />
<div id = "Scrollmaxprice">
<select >
<option id = "mx1" value="600">600</option>
<option id = "mx2" value="700">700</option>
<option id = "mx3" value="800">800</option>
<option id = "mx4" value="900">900</option>
<option id = "mx5" value="1000">1000</option>
</select>
</div>
<input type="submit" />
</form>
</body>
</html>
I changed it to use display instead of visibility since it makes more sense and works better. And since the #ScrollCountry now is above the checkboxes there is no need to hide them anymore.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function ExposeList1() {
var showstatus=document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display="block";
} else {
document.getElementById('ScrollCountry').style.display='none';
}
}
</script>
<style>
fieldset{ border: 0; padding: 0; position: relative }
#ScrollCountry{
height: 120px;
width: 150px;
overflow: auto;
border: 2px solid orange;
display:none;
border-radius:10px;
position: absolute;
background: #fff;
}
</style>
</head>
<body>
<form action="trying.php" method="post">
<fieldset>
<img src="original1.png" onmouseover="this.src='onhover1.png'" onmouseout="this.src='original1.png'" onclick="ExposeList1();return false;">
<div id="ScrollCountry">
<input type="checkbox" id="scb1" name="c1" value="Mexico"><label for="scb1">Mexico</label><br>
<input type="checkbox" id="scb2" name="c2" value="Belize"><label for="scb2">Belize</label><br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica"><label for="scb3">Jamaica</label><br>
<input type="checkbox" id="scb4" name="c4" value="Thailand"><label for="scb4">Thailand</label><br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos"><label for="scb5">Turks & Caicos</label><br>
</div>
<div id="Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id="n4" value="10">8 - 10</option>
<option id="n5" value="30">10+</option>
</select>
</div>
<div id="Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id="mn4" value="500">500</option>
<option id="mn5" value="600">600</option>
</select>
</div>
<div id="Scrollmaxprice">
<select >
<option id="mx1" value="600">600</option>
<option id="mx2" value="700">700</option>
<option id="mx3" value="800">800</option>
<option id="mx4" value="900">900</option>
<option id="mx5" value="1000">1000</option>
</select>
</div>
<input type="submit">
</fieldset>
</form>
</body>
</html>
You have to position the ScrollCountry-block element outside the normal flow of elements by adding the css-code:
position: absolute;
to it.