Develop Reference

Custom Validation and error message for Custom Select

function setError(input, message) {
const form = input.parentElement;
const small = form.querySelector('small');
small.innerText = message;
form.className = 'inputfield error';
}
function setSuccess(input) {
const form = input.parentElement;
form.className = 'inputfield success';
}
Here is my JavaScript code for setting error or success to the input fields. It is working fine for the inputs.
but when I am trying to apply the same code for custom select boxes it is not working. I am new to web development so any sort of help would be appreciated.
reference Input Field Code :
<div class="inputfield">
<label>NID</label>
<input type="text" value="" class="input" id="nid" onkeyup="checkNid()">
<small>Error Message</small>
</div>
reference Custom Select Code :
<div class="inputfield">
<label>Gender</label>
<div class="custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
</div>
<small>Error Message</small>
</div>
Here is the output. I am expecting the same sort of error message for the select fields too:
output

Replace your reference Custom Select Code with this:
<div>
<label>Gender</label>
<div class="inputfield custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
<small>Error Message</small>
</div>
</div>
If you had shared your CSS file, I would have suggested how to style it better.

.wrapper .form .inputfield .custom_select {
position: relative;
width: 100%;
height: 37px;
}
.wrapper .form .inputfield .custom_select:before {
content: '';
position: absolute;
top: 12px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent transparent;
pointer-events: none;
}
.wrapper .form .inputfield .custom_select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 100%;
height: 100%;
border: 0px;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
helere is the css for the custom selection

Hidden optgroup dynamically after choice

I have 2 optgroup in my select list (category and subcategory)
and i am trying to show optgroup and hide other on selection of subcategory.
for example if I choose in the category (sport, music)
in the subcategory I display only the sport and music
I tried with the following code but it doesn't work
Thanks
$("#custom_form_names_category").on("change", function() {
var selectedVal = $(this).find("option:selected").text();
console.log(selectedVal);
$('#custom_form_names_subcategorie > [aria-label="' + selectedVal + '"]')
.show()
.siblings("optgroup")
.css("display", "none");
});
$(".js-select2").select2({
closeOnSelect: false,
allowClear: true,
tags: true,
dropdownCssClass: "beforecheckbox"
});
.select2.select2-container {
width: 100% !important;
}
.select2-container .select2-selection__rendered {
padding: 5px 15px 0 15px;
text-transform: uppercase;
font-size: 13px;
box-shadow: none;
background-image: none;
text-transform: uppercase;
font-size: 13px;
}
.select2-container .select2-selection--single {
height: 100% !important;
border-radius: 15px !important;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
color: #fff;
background: url(../images/svg/check_active.png);
border: 0;
display: inline-block;
padding-left: 3px;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=false]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
border: #b7b9cc solid 2px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
background: red;
}
#custom_form_names_category {
margin-bottom: 50px !important;
}
.select2.select2-container {
margin-bottom: 50px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select id="custom_form_names_category" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1" data-select2-id="25">Sport</option>
<option value="17" data-select2-id="26">Volley</option>
<option value="18" data-select2-id="27">Musci</option>
<option value="29" data-select2-id="28">film</option>
<option value="35" data-select2-id="29">Englich</option>
</select>
<select id="custom_form_names_subcategorie" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible">
<optgroup label="Sport" data-select2-id="33">
<option value="2" data-select2-id="34">Dance </option>
</optgroup>
<optgroup label="Musci" data-select2-id="35">
<option value="3" data-select2-id="36">Catégorie 4</option>
<option value="4" data-select2-id="37">Rap</option>
</optgroup>
<optgroup label="Volley" data-select2-id="38">
<option value="5" data-select2-id="39">Catégorie 4</option>
</optgroup>
<optgroup label="film" data-select2-id="40">
<option value="7" data-select2-id="41">Catégorie 5</option>
</optgroup>
</select>

You cannot interact with the option groups, You can only disable them, but with the rendered result of select2.
test:
$('#custom_form_names_subcategorie').on('select2:open', function (e) {
//var first = $('#custom_form_names_category').find(':selected');
//console.log(first);
setTimeout(function(){
$('[aria-label]').hide();
$('#custom_form_names_category').find(':selected').each(function( index ) {
var selected = $( this ).text();
console.log( index + ": " + selected );
$('[aria-label="' + selected + '"]').show();
console.log($('[aria-label="' + selected + '"]'));
});
},100);
//$('[aria-label="' + selectedVal + '"]').show().siblings("li").css('display', 'none');
});
This also works when you select more than one. I had to put a setTimeout because in the on open event, of the version of select2 you used, in reality the select is not yet drawn. try to change version. However this works.
Alternatively you should fill the second select dynamically as defined in this link:
Add, select, or clear items

get text inside element, if element contains select get selected option

Post Edited: Using MutationObserver instead of DOMSubtreeModified
I have a div where I am using .each to go through every label and get their text, but I'd like to add an additional ifelse statement where if the label includes a select child, add the selected option to the text string
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
var target = document.querySelector('#droppable')
var observer = new MutationObserver(function(mutations) {
var str = "";
$('#droppable label').each(function(){
str += $(this).text() + "<br>";
document.getElementById("inside_drop_zone").innerHTML = str
});
})
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label><select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label><select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Desired Output
label OR label : selected option
ONE + ":" + week 1
THREE
TWO + ":" + week 3
I'm pretty new to JQuery so thank you for any help/tips!

Look for lines marked // changed
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
$("body").on('DOMSubtreeModified', "#droppable", function() {
var str = "";
$('#droppable label').each(function() {
const txt = $(this).text() // changed
const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select>
str += txt + (val ? ":" + val : "") + "<br>"; // changed
})
document.getElementById("inside_drop_zone").innerHTML = str
});
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label>
<select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label>
<select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>

javascript won't appear on html

I have been trying to make an etch a sketch for days now. I cannot find what to try next as I am a brand new web development student. I have put console logs in and haven't found any errors in the dev tools.
I have tried breaking down other files to run only one function at a time and somehow my addEventListeners aren't working as they should be. A little nudge in the right direction would help alot.
<!DOCTYPE html>
<html>
<head>
//<link rel="stylesheet" type="text/css" href="etchASketch.css">
<style>
* {
background-color: aqua;
font-size: 16px;
}
#headers {
height: 25%;
position:relative;
}
h1 {
font-size: 2em;
font-family: cursive;
color: blue;
text-align: center;
margin: auto;
padding-bottom: 10px;
}
#instructions {
text-align: center;
font-size: 1.5em;
font-family: cursive;
margin: auto;
padding-bottom: 15px;
}
#moreInstructions {
text-align: center;
font-family: cursive;
font-size: 1.25em;
width: 60%;
margin: auto;
padding-top: 15px;
}
#colorOptions {
position: absolute;
height: 45px;
width: 125px;
color: blue;
text-align: center;
font-family: cursive;
font-size: 1.25em;
cursor: pointer;
border-radius: 20%;
left: 25px;
background-color: pink;
}
#btns {
float: right;
height: 200px;
display:flex;
flex-direction: column;
justify-content: space-between;
margin-right: 30px;
}
.radio {
height: 25px;
width: 50px;
border-radius: 15%;
margin: 15px;
padding: 10px;
display: inline-block;
float: right;
font-family: cursive;
font-size:1em;
}
#sliderContainer {
margin: auto;
height: 75px;
width: 400px;
font-family: cursive;
text-align: center;
color: blue;
background-color: turquoise;
}
#mySlider {
margin: auto;
}
.grid {
bottom: 0;
height: 60%;
width: 70%;
margin: auto;
border: 2px solid black;
background-color: white;
}
.radio :active {
background-color: grey;
}
</style>
</head>
<body>
<div id="headers">
<h1 id="heading">Etch-A-Sketch</h1>
<h3 id="instructions">Choose a color and set the slider on the size of grid you prefer</h3>
<p id="moreInstructions">Move cursor over the grid to draw your masterpiece. If you make a mistake, just hit "Erase"
then move cursor over unwanted squares. Click "Draw" to continue drawing. Click "Clear Grid" to clear grid
entirely and begin a new drawing.</p>
</div>
<select id="colorOptions">
<option value"colorChoices" selected>Colors</option>
<option value"red">Red</option>
<option value"pink">Pink</option>
<option value"blue">Blue</option>
<option value"green">Green</option>
<option value"purple">Purple</option>
<option value"black">Black</option>
</select>
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</div>
<div class="size">Size = <span class="out"> </span>
<input type="range" class="slider" id="myRange" min="1" max="64" value="16">
<div class="grid"></div>
<script>
let size = 16;
let color = 'black';
var slider = document.getElementById('myRange');
var output = document.querySelector('.out');
var clearGrid = document.getElementById('clearGrid');
let drawButton = document.getElementById('draw');
let eraseButton = document.getElementById('erase');
let select = document.getElementById('colorOptions');
let colorChoice = document.getElementById('colorOptions').value;
select.onchange = function() {
let color = this.value;
}
drawButton.onclick = function() {
if (this.checked == true && eraseButton.checked == false) color = color;
}
eraseButton.onclick = function() {
if (this.checked == true) color = 'white';
else if (this.checked == false)
color = color;
}
function hoverFunc(e) {
if (eraseButton.checked == true) {
this.style.backgroundColor = 'white';
} else if (drawButton.checked == true) {
this.style.backgroundColor = color;
}
}
slider.onchange = function() {
output.innerHTML = this.value;
size = this.value;
buildBoard(this.value);
}
function buildBoard(size) {
let grid = document.querySelector(".grid");
grid.style.gridTemplateRows = `repeat (${size}, 1fr)`;
grid.style.gridTemplateColumns = `repeat (${size}, 1fr)`;
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
let square = document.createElement('div');
square.classList.add('cell');
square.addEventListener('mouseover', hoverFunc);
grid.appendChild(square);
}
}
}
clearGrid.addEventListener('click', clearBoard);
function clearBoard() {
let cell = document.querySelectorAll('.cell');
cell.forEach(x => x.remove());
}
function hoverFunc(e) {
if (eraseButton.checked == true) {
this.style.backgroundColor = 'white';
} else if (drawButton.checked == true) {
this.style.backgroundColor = select.value;
}
}
buildBoard(size);
</script>
</body>
</html>

Problem 1:
<select id="colorOptions">
<option value"colorChoices" selected>Colors</option>
<option value"red">Red</option>
<option value"pink">Pink</option>
<option value"blue">Blue</option>
<option value"green">Green</option>
<option value"purple">Purple</option>
<option value"black">Black</option>
</select>
Solution:
<select id="colorOptions">
<option value="colorChoices" selected>Colors</option>
<option value="red">Red</option>
<option value="pink">Pink</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="purple">Purple</option>
<option value="black">Black</option>
</select>
Problem 2:
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</div>
Solution:
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" name="xyz" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" name="xyz" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" name="xyz" id="clearGrid" class="radio">
</div>
Give name attributes to all the radio buttons and their values should be same
The grid is not having any height.
Change it using inline css.
For all the variables just after the script tag change all the let to var

Trouble adding total value while converting string to int

I have two select fields that ask the user two different questions and adds the overall value to the final total depending on the selected value. I'm not fully understanding why the final total is saying $NaN USD when I select the second select field first but if I select the first select field first then it doesn't display $NaN USD.
var total;
$('.form-contro').on('change', function() {
var get = $('#form-contro option:selected').val();
total = Number(get);
$('.text-center h2 span').html(total + " USD");
});
$('.form-contr').on('change', function() {
var get = $('#form-contr option:selected').val();
if (get === 'no') {
total = 1000;
} else if (get === 'yes') {
total = total + 30;
}
$('.text-center h2 span').html(total + " USD");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="wrapper" style="margin-top: 20px; font-size: 12px; color: #888; font-family: 'Raleway', sans-serif;" for="states">Number of items:</label>
<select class="form-contro" id="form-contro" style="width: 320px; height: 40px; text-indent: 10px; display: block; margin: 0 auto; border-radius: 4px; border-style: solid; border-color: #343434;">
<option value="90" id="items">1 Item</option>
<option value="95.50" id="items">2 Items</option>
<option value="100" id="items">3 Items</option>
<option value="105" id="items">4 Item</option>
</select>
<label class="wrapper" style="margin-top: 20px; font-size: 12px; color: #888; font-family: 'Raleway', sans-serif;" for="states">Will you be flying?</label>
<select class="form-contr" id="form-contr" style="width: 320px; height: 40px; text-indent: 10px; display: block; margin: 0 auto; border-radius: 4px; border-style: solid; border-color: #343434;">
<option value="no" id="items">No</option>
<option value="yes" id="items">Yes</option>
</select>
<div class="text-center" style="clear: both;">
<h2 style="margin-top: 40px;">Total amount $<span id="new_text">90 USD</span></h2>
</div>
I'm fairly new to Javascript so any help is appreciated since I've been working on this problem awhile.

You didn't give total an initial value, so at the top, make the value of total:
var total = 0;
The reason you don't get NaN the other way around, is because you used Number(get), which gives it a default value of 0 if null.