We Keep Coding

Making a select option depend on a previous select

I want to make a select option for size that depends on what the person chooses on a previous category select. Basically, if the person chooses clothing category then the next select will only show sizes (S,M,L,XL) and if he chooses shoes he will only be shown (33,34,44,42) you get the idea..
I use nodeJS and EJS as my template. I am NOT familiar with Jquery.
my code:
<select id='inputStyle' name='category'>
<option disabled='true'>Category</option>
<option value='shoes'>Championes</option>
<option value='shirts'>Camiseta</option>
<option value=''>sweatshirts</option>
<option value='others'>Otro</option>
</select>
</div>
<div class='inputStyle'>
<label for='size'> Size </label>
<br>
<select id='size' name='size'>
<option value=''></option>
<option value=''></option>
<option value=''></option>
<option value='others'></option>
</select>

You can do it by just using the below code. Just replace the list according to your needs.
var sizeForShoes = ["40", "44", "42", "46", "50"];
var sizeForDress = ["S", "M", "L", "XL", "XXL"];
$('#Category').change(function() {
var selectedCategory = $('#Category').val();
if(selectedCategory != ""){
//Removing current option
$('#size').find('option').remove();
var sizeList = [];
if(selectedCategory == 'shoes'){
for (var i = 1; i <= sizeForShoes.length; i++) {
var shoeSize = sizeForShoes[i];
$('#size').append($("<option></option>").attr("value", shoeSize).text(shoeSize));
}
}
else{
for (var i = 1; i <= sizeForDress.length; i++) {
var dressSize = sizeForDress[i];
$('#size').append($("<option></option>").attr("value", dressSize).text(dressSize));
}
}
}else{
//If nothing is selected then it will remove previous options
$("#size").empty();
$('#size').append($("<option></option>").attr("value", "").text("Select size"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="Category">Category</label>
<select id="Category" name="Category" >
<option value="">Select Category</option>
<option value='shoes'>Championes</option>
<option value='shirts'>Camiseta</option>
<option value='sweatshirts'>sweatshirts</option>
<option value='others'>Otro</option>
</select><br><br>
<label for="size">Size</label>
<select id="size" name="size">
<option value="">Select size</option>
</select>

Unable to remove options from select with JavaScript iteration?

My goal is to remove options from a select input ("class") based on their classList depending on the selection made in a previous select input ("class-type"). Strangely enough, some options ARE removed (as they should be) when enableClassSelect is called, but not all options which don't have the necessary class are moved at once. Currently the "class-list" needs to be changed ~7 times before ALL options are removed (this should not happen!).
See code below - I've reviewed it several times and attempted some debugging to no avail. console.log(classSelect.length); prints "46", which is correct, so each option element should be checked in the iteration.
function enableClassSelect(classType) {
let classSelect = document.getElementById("class");
console.log("Length: " + classSelect.length);
for (i = 0; i < classSelect.length; i++) {
if (!classSelect.options[i].classList.contains(classType)) {
classSelect.remove(i);
}
}
classSelect.disabled = false;
classSelect.classList.remove("disabled-select");
let classDefaultOption = document.getElementById("class-default-option");
classDefaultOption.innerHTML = " -- select a class -- ";
return;
}
<select onchange="javascript:enableClassSelect(this.options[this.selectedIndex].value);" class="reg" id="class-type" name="class-type" required>
<option disabled selected value> -- select a class type -- </option>
<option value="Magician">Magician</option>
<option value="Thief">Thief</option>
<option value="Warrior">Warrior</option>
<option value="Bowman">Bowman</option>
<option value="Pirate">Pirate</option>
</select>
<select class="disabled-select reg" id="class" name="class" disabled required>
<option class="Magician Thief Warrior Bowman Pirate" id="class-default-option" disabled selected value></option>
<!-- Magicians -->
<option class="Magician" value="Battle Mage">Battle Mage</option>
<option class="Magician" value="Beast Tamer">Beast Tamer</option>
<option class="Magician" value="Blaze Wizard">Blaze Wizard</option>
<option class="Magician" value="Evan">Evan</option>
<option class="Magician" value="Kanna">Kanna</option>
<option class="Magician" value="Luminous">Luminous</option>
<option class="Magician" value="Bishop">Bishop</option>
<option class="Magician" value="Ice/Lightning Mage">Ice/Lightning Mage</option>
<option class="Magician" value="Fire/Poison Mage">Fire/Poison Mage</option>
<option class="Magician" value="Kinesis">Kinesis</option>
<option class="Magician" value="Illium">Illium</option>
<!-- Thieves -->
<option class="Thief" value="Dual Blade">Dual Blade</option>
<option class="Thief" value="Night Walker">Night Walker</option>
<option class="Thief" value="Phantom">Phantom</option>
<option class="Thief" value="Shadower">Shadower</option>
<option class="Thief" value="Night Lord">Night Lord</option>
<option class="Thief" value="Xenon">Xenon</option>
<option class="Thief" value="Cadena">Cadena</option>
<!-- Warriors -->
<option class="Warrior" value="Aran">Aran</option>
<option class="Warrior" value="Dawn Warrior">Dawn Warrior</option>
<option class="Warrior" value="Demon Avenger">Demon Avenger</option>
<option class="Warrior" value="Demon Slayer">Demon Slayer</option>
<option class="Warrior" value="Hayato">Hayato</option>
<option class="Warrior" value="Kaiser">Kaiser</option>
<option class="Warrior" value="Mihile">Mihile</option>
<option class="Warrior" value="Dark Knight">Dark Knight</option>
<option class="Warrior" value="Hero">Hero</option>
<option class="Warrior" value="Paladin">Paladin</option>
<option class="Warrior" value="Zero">Zero</option>
<option class="Warrior" value="Blaster">Blaster</option>
<!-- Bowmen -->
<option class="Bowman" value="Marksman">Marksman</option>
<option class="Bowman" value="Bowmaster">Bowmaster</option>
<option class="Bowman" value="Wild Hunter">Wild Hunter</option>
<option class="Bowman" value="Wind Archer">Wind Archer</option>
<option class="Bowman" value="Mercedes">Mercedes</option>
<option class="Bowman" value="Pathfinder">Pathfinder</option>
<!-- Pirates -->
<option class="Pirate" value="Angelic Buster">Angelic Buster</option>
<option class="Pirate" value="Cannoneer">Cannoneer</option>
<option class="Pirate" value="Jett">Jett</option>
<option class="Pirate" value="Mechanic">Mechanic</option>
<option class="Pirate" value="Buccaneer">Buccaneer</option>
<option class="Pirate" value="Corsair">Corsair</option>
<option class="Pirate" value="Shade">Shade</option>
<option class="Pirate" value="Thunder Breaker">Thunder Breaker</option>
<option class="Pirate" value="Ark">Ark</option>
</select>
Expected: select a class type (e.g. "Warrior" and the "class" element becomes enabled and displays the proper classes.
Actual: "class" options are removed seemingly at random over ~6 calls to enableClassSelect until the select element is empty.

This is one way of doing it, not sure if it would be the fastest way, but it does work.
Essentially I removed all of the options from the HTML, and instead I am only adding on the correct options for that class type.
function enableClassSelect(classType) {
// Make sure the names of these are the same as the value for the options in the class-type select
const magicians = ["Battle Mage", "Beast Tamer", "Blaze Wizard"];
const thieves = ["Dual Blade", "Night Walker", "Phantom"];
// Make sure theses are both in the same order
const classTypesNames = ["magicians", "thieves"];
const classTypes = [magicians, thieves];
let classSelect = document.getElementById("class");
// Clear the options from the classSelect, except for the default option
var length = classSelect.options.length;
if (length > 1) {
for (i = classSelect.options.length - 1; i > 0; i--) {
classSelect.remove(i);
}
}
// Check the classtype they selected, and get the list of classes for that classType
for (i = 0; i < classTypes.length; i++) {
if (classType === classTypesNames[i]) {
var classes = classTypes[i];
for (j = 0; j < classes.length; j++) {
// Create an option element with the class as the value
var opt = document.createElement("option");
opt.value = classes[j];
opt.innerHTML = classes[j];
classSelect.appendChild(opt);
}
}
}
classSelect.disabled = false;
classSelect.classList.remove("disabled-select");
return;
}
<select onchange="javascript:enableClassSelect(this.options[this.selectedIndex].value);" class="reg" id="class-type" name="class-type" required>
<option disabled selected value> -- select a class type -- </option>
<option value="magicians">Magician</option>
<option value="thieves">Thief</option>
</select>
<select class="disabled-select reg" id="class" name="class" disabled required>
<option id="class-default-option" disabled selected value> -- select a class -- </option>
</select>
There needs to be a list for each classType that contains the classes for that classType.
const warriors = ["Aran", "Dawn Warrior", "Demon Avenger"];
Then add that classType to the list of classTypes:
const classTypesNames = ["magicians", "thieves", "warriors"];
const classTypes = [magicians, thieves, warriors];
This part "resets" the options for the classSelect so that only the default one remains:
var length = classSelect.options.length;
if (length > 1) {
for (i = classSelect.options.length - 1; i > 0; i--) {
classSelect.remove(i);
}
}
From there the next section checks the value of the classType the user selected, and gets the list of classes for that classType, and creates option elements and appends them to the classSelect:
for (i = 0; i < classTypes.length; i++) {
if (classType === classTypesNames[i]) {
var classes = classTypes[i];
for (j = 0; j < classes.length; j++) {
// Create an option element with the class as the value
var opt = document.createElement("option");
opt.value = classes[j];
opt.innerHTML = classes[j];
classSelect.appendChild(opt);
}
}
}

Displaying multiple Select Values into an alert? [duplicate]

This question already has answers here:
How to get all selected values of a multiple select box?
(28 answers)
Closed 5 years ago.
I'm still a beginner hence this is difficult, but how do I display the options I selected into an alert box. So it would be "You selected (value), (value), (value)".
This is my select list
<form id='form1'>
<select id="options" multiple >
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>
Should I add a button. But what I'm struggling with is the javascript.

The easiest way to access selected elements of a select tag is with the "selectedOptions" property.
I would do it this way:
var form = document.getElementById('form1');
form.addEventListener('submit', function () {
var select = form.querySelector('#options'),
options = select.selectedOptions,
values = [];
for (var i = options.length - 1; i >= 0; i--) {
values.push(options[i].value);
}
alert('You selected: ' + values.join(', '));
}, false);

Try something like this:
function selectedValues()
{
var x=document.getElementById("options");
var selectedValues= '';
for (var i = 0; i < x.options.length; i++) {
if(x.options[i].selected ==true){
selectedValues += x.options[i].value + ", ";
}
}
alert("You selected: "+ selectedValues.slice(0, -2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='form1'>
<select id="options" multiple onchange="selectedValues()">
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>

Select primary dropdown and force other dropdowns to select the option with the same value

When the Primary dropdown changes, I want the other dropdown to change accordingly.
But I dont know why only the 1st Other dropdown is working while the 2nd fails to change its value accordingly. I
m aware that if I change the name of the 2nd dropdown to the same as the 1st dropdown it will work.
But as they are different fields that are to be saved in the db, so the names have to be different.
Any solution would be appreciated. Many thanks.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
var others2 = document.getElementsByName('Qualifications2');
for (i = 0; i < others2.length; i++)
others2[i].selectedIndex = index_name2;
}
Primary dropdown<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown2
<select id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>

Add a css class to your secondary drop downs and use document.querySelectorAll to get them all at once.
Then you can use a single loop to update their selectedIndex.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
}
div {
padding: 15px;
}
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<div> <b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>

So it turns out i haven't defined sth in my code, thanks for pointing that out #Tiny Giant
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var index_name2 =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
var others2 = document.getElementsByName('Qualifications2');
for (j = 0; j < others2.length; j++)
others2[j].selectedIndex = index_name2;
}
Primary dropdown<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown2
<select id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>

Get the field value by label time field as below.

I want to get the Hour and minute value from below control by using there label
also I want to set the value to that control.
Using jQuery and javascript.
<td class="ms-dttimeinput" nowrap="nowrap">
<label for="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateHours" style="display:none">NEndTime Hours</label>
<select name="ctl00$m$g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce$ff211$ctl00$ctl00$DateTimeField$DateTimeFieldDateHours" id="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateHours">
<option selected="selected" value="00:">00:</option>
<option value="01:">01:</option>
<option value="21:">21:</option>
<option value="22:">22:</option>
<option value="23:">23:</option>
</select>
<label for="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateMinutes" style="display:none">NEndTime Minutes</label>
<select name="ctl00$m$g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce$ff211$ctl00$ctl00$DateTimeField$DateTimeFieldDateMinutes" id="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateMinutes">
<option selected="selected" value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select></td>

Get the value for hr and min using the text in the label tags
var hr,min;
$(".ms-dttimeinput label").each(function() {
var lbl = $(this);
if(lbl.text() == "NEndTime Hours")
hr = lbl.next("select").val();
if(lbl.text() == "NEndTime Minutes")
min = lbl.next("select").val();
});
Set the value for hr and min using the text in the label tags
var hr = "01";
var min = "o5";
$(".ms-dttimeinput label").each(function() {
var lbl = $(this);
if(lbl.text() == "NEndTime Hours")
lbl.next("select").val(hr);
if(lbl.text() == "NEndTime Minutes")
lbl.next("select").val(min);
});
If there is only one widget on the page the more practical approach would be using the class name selector "ms-dttimeinput" with the descendent tag selector " select" and the nth child class ":nth-child()".
var hr = $(".ms-dttimeinput select:nth-child(1)").val();
var min = $(".ms-dttimeinput select:nth-child(2)").val();
$(".ms-dttimeinput select:nth-child(1)").val(hr);
$(".ms-dttimeinput select:nth-child(2)").val(min);