Develop Reference

multiple select remove disable button if select is not empty

I'm working with multiple select, and i want to remove the attribute disabled button if all select has value, however the "technician" has sub item which is required and other phase don't have sub.
I wan't to remove disable attribute if all select(NO SUB) has value, and select(with sub) has value.
Here's my code:
const type = document.getElementById("empType");
const phase = document.getElementById("phase");
const subPhase = document.getElementById("subPhase");
type.addEventListener("change", appendPhase);
function appendPhase(){
$("#phase").empty();
var option = '';
if(type.value == 1){
option += '<option value="0">SELECT</option><option value="1">Trainee</option><option value="2">Acting</option><option value="3">Competency</option>'
}
if(type.value == 2){
option += '<option value="0">SELECT</option><option value="1">Phase 1</option><option value="2">Phase 2</option>'
}
if(type.value == 0){
$(subPhase).attr("hidden", true);
option += '<option value="0">SELECT</option>'
}
$(phase).append(option);
$(subPhase).attr("hidden", true);
}
phase.addEventListener("change", showIfTech);
function showIfTech() {
if(type.value == 2){
$(subPhase).attr("hidden", false);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="empType">
<option value="0">SELECT</option>
<option value="1">LINE LEADER</option>
<option value="2">TECHNICIAN</option>
</select>
<select id="phase">
<option value="0">SELECT</option>
</select>
<select id="subPhase" hidden>
<option value="0">SELECT</option>
<option value="1">COMMON</option>
<option value="2">ELECTRICAL</option>
<option value="3">MECHANICAL</option>
</select>
<br>
<br>
<button disabled>CHECK ME</button>

First, you need to add id attribute to button to use it later.
Second, use event listner change (using event delegation) to listen all select boxes change where it is not hidden with selector select:not([hidden]). And then test that all select boxes are selected where value is not 0.
Here is the code.
const type = document.getElementById("empType");
const phase = document.getElementById("phase");
const subPhase = document.getElementById("subPhase");
type.addEventListener("change", appendPhase);
function appendPhase() {
$("#phase").empty();
var option = '';
if (type.value == 1) {
option += '<option value="0">SELECT</option><option value="1">Trainee</option><option value="2">Acting</option><option value="3">Competency</option>'
}
if (type.value == 2) {
option += '<option value="0">SELECT</option><option value="1">Phase 1</option><option value="2">Phase 2</option>'
}
if (type.value == 0) {
$(subPhase).attr("hidden", true);
option += '<option value="0">SELECT</option>'
}
$(phase).append(option);
$(subPhase).attr("hidden", true);
}
phase.addEventListener("change", showIfTech);
function showIfTech() {
if (type.value == 2) {
$(subPhase).attr("hidden", false);
}
}
document.addEventListener('change', isAllSelected);
function isAllSelected() {
let allSelected = [];
const allSelectBoxes = document.querySelectorAll('select:not([hidden])');
allSelectBoxes.forEach((item) => {
if (item.value != '0') {
allSelected.push(item.value);
}
});
const checkMeButton = document.getElementById('check-me-button');
if (allSelected.length === allSelectBoxes.length) {
checkMeButton.disabled = false;
} else {
checkMeButton.disabled = true;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="empType">
<option value="0">SELECT</option>
<option value="1">LINE LEADER</option>
<option value="2">TECHNICIAN</option>
</select>
<select id="phase">
<option value="0">SELECT</option>
</select>
<select id="subPhase" hidden>
<option value="0">SELECT</option>
<option value="1">COMMON</option>
<option value="2">ELECTRICAL</option>
<option value="3">MECHANICAL</option>
</select>
<br>
<br>
<button id="check-me-button" disabled>CHECK ME</button>

How can i save this script to Local Storage

I want simply save changes that i've made with main text heading, changed color/font-size/font using Local Storage. So after page reload changes will stay at browser. How could i make this?
Html:
<div class="main_text">
<h1>Change Headings</h1>
</div>
<select id="selection">
<option value="h1">H1</option>
<option value="h2">H2</option>
<option value="h3">H3</option>
<option value="h4">H4</option>
<option value="h5">H5</option>
</select>
<div class="color_picker">
<h3>Choose Text Color</h3>
<input type="color" id="color_picker">
</div>
<div class="change_font">
<h3>Change Font</h3>
<select id="select_font">
<option value="Sans-serif">Sans-serif</option>
<option value="Monospace">Monospace</option>
<option value="Serif">Serif</option>
<option value="Fantasy">Fantasy</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
</select>
</div>
<div class="change_size">
<h3>Font Size</h3>
<select id="change_font_size">
<option value="14">14</option>
<option value="18">18</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
</select>
</div>
JQuery:
$('#selection').change(function () {
var tag = $(this).val();
$(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
});
$('#color_picker').change(function() {
var color_p = $(this).val();
$('.main_text').css("color", color_p);
});
$('#select_font').change(function () {
var change_font = $(this).val();
$(".main_text").css("font-family", change_font);
});
$("#change_font_size").change(function() {
var font_size = $(this).val();
$('.main_text > *').css("font-size", font_size + "px");
});
JSfiddle

DEMO
$(document).ready(function () {
var tag = localStorage.tag || $('#selection').val();
var color = localStorage.color || $('#color_picker').val();
var font = localStorage.font || $('#select_font').val();
var size = localStorage.font_size || $('#change_font_size').val();
$('.main_text').css({
"color": color,
"font-family": font,
"font-size": size
}).html("<" + tag + ">Change Headings</" + tag + ">");
$('#selection').val(tag);
$('#color_picker').val(color);
$('#select_font').val(font);
$('#change_font_size').val(size);
$('#selection').change(function () {
var tag = $(this).val();
localStorage.tag = tag;
$(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
});
$('#color_picker').change(function () {
var color_p = $(this).val();
localStorage.color = color_p;
$('.main_text').css("color", color_p);
});
$('#select_font').change(function () {
var change_font = $(this).val();
localStorage.font = change_font;
$(".main_text").css("font-family", change_font);
});
$("#change_font_size").change(function () {
var font_size = $(this).val();
localStorage.font_size = font_size;
$('.main_text > *').css("font-size", font_size + "px");
});
});

Add this code after your JS code:
$(document).ready(function () {
//load values if found
if (localStorage.getItem("selection") != null) {
$('#selection').val(localStorage.getItem("selection")).trigger("change");
}
if (localStorage.getItem("color_picker") != null) {
$('#color_picker').val(localStorage.getItem("color_picker")).trigger("change");
}
if (localStorage.getItem("select_font") != null) {
$('#select_font').val(localStorage.getItem("select_font")).trigger("change");
}
if (localStorage.getItem("change_font_size") != null) {
$('#change_font_size').val(localStorage.getItem("change_font_size")).trigger("change");
}
});
Here is the JSFiddle demo

Count Unique Selection from Multiple Dropdown

I'm new to jquery, I'm working on a survey form and I have multiple dropdown menus for different questions but they all have the same dropdown value. Supposed I have:
<select name="Forms[AgentIsPitch]" id="Forms_AgentIsPitch">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
<select name="Forms[MandatoryOptIsStated]" id="Forms_MandatoryOptIsStated">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
And other different dropdowns with different id's. What is the best way to count how many has selected Yes, No and N/A/ ? Thanks

you can do it simple this way
$('select').change(function() {
// get all selects
var allSelects = $('select');
// set values count by type
var yes = 0;
var no = 0;
// for each select increase count
$.each(allSelects, function(i, s) {
// increase count
if($(s).val() == 'Yes') { yes++; }
if($(s).val() == 'No') { no++; }
});
// update count values summary
$('.cnt-yes').text(yes);
$('.cnt-no').text(no);
});
DEMO

Try this — https://jsfiddle.net/sergdenisov/h8sLxw6y/2/:
var count = {};
count.empty = $('select option:selected[value=""]').length;
count.yes = $('select option:selected[value="Yes"]').length;
count.no = $('select option:selected[value="No"]').length;
count.nA = $('select option:selected[value="N/A"]').length;
console.log(count);

My way to do it would be :
var optionsYes = $("option[value$='Yes']:selected");
var optionsNo = $("option[value$='No']:selected");
var optionsNA = $("option[value$='N/A']:selected");
console.log('number of yes selected = ' + optionsYes .length);
console.log('number of no selected = ' + optionsNo .length);
console.log('number of N/A selected = ' + optionsNA .length);
Check the console (or replace with alert).
With your code, it would be something like that (assuming you want to check on a button click event) :
<select name="Forms[AgentIsPitch]" id="Forms_AgentIsPitch">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
<select name="Forms[MandatoryOptIsStated]" id="Forms_MandatoryOptIsStated">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
<button class="btn btn-primary" id="countYes"></button>
<script type="text/javascript">
$('#countYes').on('click', function(){
var optionsYes = $("option[value$='Yes']:selected");
var optionsNo = $("option[value$='No']:selected");
var optionsNA = $("option[value$='N/A']:selected");
console.log('number of yes selected = ' + optionsYes .length);
console.log('number of no selected = ' + optionsNo .length);
console.log('number of N/A selected = ' + optionsNA .length);
});
</script>
You can check at another event, I choosed a button click just for example.

There is likely a cleaner way to do this, but this will get the job done (assuming there is a button click to trigger things):
$("#theButton").on('click', function() {
var totalSelect = 0;
var totalYes = 0;
var totalNo = 0;
var totalNA = 0;
$("select").each(function(){
totalSelect++;
if ($(this).val() == "Yes") { totalYes++; }
if ($(this).val() == "No") { totalNo++; }
if ($(this).val() == "N/A") { totalNA++; }
});
});
Hope this helps the cause.

In common you can use change event:
var results = {};
$('select').on('change', function() {
var val = $(this).val();
results[val] = (results[val] || 0) + 1;
});
DEMO
If you want count for each type of select:
$('select').on('change', function() {
var val = $(this).val();
var name = $(this).attr('name');
if (!results[name]) {
results[name] = {};
}
results[name][val] = (results[name][val] || 0) + 1;
});
DEMO
In the results will be something like this:
{
"Forms[AgentIsPitch]": {
"Yes": 1,
"No": 2,
"N/A": 3
},
"Forms[MandatoryOptIsStated]": {
"No": 5,
"N/A": 13
},
}
UPD: for counting current choice:
$('select').on('change', function() {
var results = {};
$('select').each(function() {
var val = $(this).val();
if (val) {
results[val] = (results[val] || 0) + 1;
}
})
console.log(results);
});
DEMO

autoselect select options with javascript / jquery

I am working on a function in Javascript/jQuery.
The function will search for usernames in the "select" element "Y" and selects them whene you copied a bunch of usernames in the textarea "X" with ', ', ',', ';' or ' ' as separator and also if you do it the other way around:
javascript/jQuery:
$(document).ready(function() {
$("dd#id-element select#id").attr({"multiple": "multiple", "size": 25, "name": "id[]"});
});
$(function() {
$("select#id").change(function() {
var selected_id = $(this).val(),
selected_name = new Array();
$(this).find("option:selected").each(function() {
selected_name.push($(this).text());
});
$("textarea#id_field").val(selected_id);
$("textarea#name_field").val(selected_name);
console.log(selected_id, selected_name);
});
$("textarea#name_field").keyup(function() {
$("select#id option").removeAttr("selected");
var names_raw = $(this).val(),
names = names_raw.replace(/(, | |,)/gi, ";"),
selected_name = names.split(";"),
selected_id = new Array();
$.each(selected_name, function(i, value) {
if (value != "" && value != null) {
$("select#id option[label='" + value + "']").attr("selected", true);
selected_id.push($("select#id option[label='" + value + "']").val());
}
});
});
});
HTML code:
<select name="id" id="id">
<option value="1092" label="00lara00">00lara00</option>
<option value="5105" label="010201e">010201e</option>
<option value="1725" label="0411dennis">0411dennis</option>
<option value="1795" label="051259">051259</option>
<option value="2281" label="0815Timmey">0815Timmey</option>
<option value="3337" label="0vlinder0">0vlinder0</option>
<option value="127" label="1001gece">1001gece</option>
<option value="3693" label="111nizza">111nizza</option>
<option value="821" label="114helen">114helen</option>
<option value="2887" label="1212whopper">1212whopper</option>
<option value="5564" label="123boo">123boo</option>
</select>
<textarea name="name_field" id="name_field"></textarea>
when i select some usernames in the select element, it works fine, the usernames are copied to the textarea.
when i paste some usernames in the textarea, everything is deselected like it should, but there is nothing new selected

I finally got it working. This is how I did it
Javascript:
$(document).ready(function() {
$("dd#id-element select#id").attr({"size": 25});
});
$(function() {
$("select#id").change(function() {
var selected_id = $(this).val(),
selected_name = new Array();
$(this).find("option:selected").each(function() {
selected_name.push($(this).text());
$(this).addClass("checked");
});
$("textarea#name_field").val(selected_name);
$("textarea#name_field").keyup();
});
$("textarea#name_field").keyup(function() {
$("select#id option.checked").attr("checked", null).attr("selected", null).removeClass("checked");
var names_raw = filterValue($(this).val()),
names = names_raw.replace(/(, | |,|\s)/gi, ";"),
selected_name = names.split(";"),
selected_id = new Array();
$(this).val(names_raw)
$.each(selected_name, function(i, value) {
if (value != "" && value != null) {
if ($("select#id option[label='" + value + "']").length > 0) {
$("select#id option[label='" + value + "']").attr('checked', 'checked').attr('selected', 'selected').addClass("checked").focus();
selected_id.push($("select#id option[label='" + value + "']").val());
}
}
});
$("select#id").val(selected_id);
});
});
html code:
<select name="id[]" id="id" multiple="multiple">
<option value="1092" label="00lara00">00lara00</option>
<option value="5105" label="010201e">010201e</option>
<option value="1725" label="0411dennis">0411dennis</option>
<option value="1795" label="051259">051259</option>
<option value="2281" label="0815Timmey">0815Timmey</option>
<option value="3337" label="0vlinder0">0vlinder0</option>
<option value="127" label="1001gece">1001gece</option>
<option value="3693" label="111nizza">111nizza</option>
<option value="821" label="114helen">114helen</option>
<option value="2887" label="1212whopper">1212whopper</option>
<option value="5564" label="123boo">123boo</option>
</select>
<textarea name="name_field" id="name_field"></textarea>

Cut option in select

I have:
<select>
<option value=1>1</option>
<option value=1>2</option>
<option value=1>3</option>
...
<option value=97>97</option>
<option value=98>98</option>
<option value=99>99</option>
</select>
How can i with jQuery cut with this all option from value 20 to 40?

var select = $('#mySelect');
for (var i = 20; i <= 40; i++)
{
select.find('option[value="' + i + '"]').remove();
}
The simpliest way...
Another is filter(), here:
$('#mySelect option').filter(function() {
return $(this).val() >= 20 && $(this).val() <= 40;
}).remove();