We Keep Coding

How to refresh a select list in html

I have a drop-down list where depending on the selected value, the next drop-down list shows specific values. when changing the value of the first list and then going back to the old value, the second list does not update. keeps the same value selected before. How can I make the second list update to the value I marked as selected by default whenever I change the value of the first list?
I hope you guys were able to understand me, and I thank you for your time.
Here's the code:
<select onchange="showprd('hidevalue', this), showprd2('hidevalue2', this)">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="hidevalue">
<option value="" disabled selected hidden>Selecione o produto</option>
<option value="pleno">Pleno</option>
<option value="integrado">Integrado</option>
</select>
<select hidden id="hidevalue2">
<option value="" disabled selected hidden>Selecione o produto</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</body>
<script>
function showprd(id, elementValue) {
document.getElementById(id).style.display = elementValue.value == 0 ? 'block' : 'none';
}
function showprd2(id, elementValue) {
document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
}
</script>

TL;DR. Control the input value changes in one place.
Please see the updated snippet below. html structure hasn't been changed, but I've removed the inline js call and updated the id names. JavaScript blocks are commented in details.
In a nut-shell, this code listens for any change to the parent select dropdown. Whenever a change occurs, its child dropdowns will reset their values and toggle their visibility accordingly.
// Assign each dom element to a variable
const primarySelect = document.querySelector('#primary');
const childSelect1 = document.querySelector('#child1');
const childSelect2 = document.querySelector('#child2');
const defaultValues = document.querySelectorAll('.default');
function resetInputs() {
// Reset the child select options to default
defaultValues.forEach(option => option.selected = true);
}
function handlePrimary(e) {
// Reset the child select values whenever the parent value changes
resetInputs();
// `input` value is always a string. Here we're converting it to a number
const val = parseFloat(e.target.value);
// Toggle visibility of child select dropdowns
[childSelect1, childSelect2].
forEach((select, i) => select.style.display = val === i ? 'block' : 'none');
}
primarySelect.addEventListener('change', handlePrimary);
<select id="primary">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="child1">
<option class="default" value="" disabled selected hidden>Selecione o produto</option>
<option value="pleno">Pleno</option>
<option value="integrado">Integrado</option>
</select>
<select hidden id="child2">
<option class="default" value="" disabled selected hidden>Selecione o produto</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>

If I understood correctly, the expected behavior is when the second or third <select> is hidden, the <select> should go back to default (the first <option>?). If so, then remove disabled and hidden from the first <option> of the second and third <select> then add the following:
selectObj.hidden = true;
selectObj.selectedIndex = 0;
The example below has a <form> wrapped around everything (always use a form if you have more than one form control. By using HTMLFormElement interface I rewrote the code and can reference all form controls with very little code. Inline event handlers are garbage so don't do this:
<select id='sel' onchange="lame(this)">
Instead do this:
selObj.onchange = good;
OR
selObj.addEventListener('change', better)
Read about events and event delegation
const UI = document.forms.UI;
UI.onchange = showSelect;
function showSelect(e) {
const sel = e.target;
const IO = this.elements;
if (sel.id === "A") {
if (sel.value === '0') {
IO.B.hidden = false;
IO.C.hidden = true;
IO.C.selectedIndex = 0;
} else {
IO.B.hidden = true;
IO.B.selectedIndex = 0;
IO.C.hidden = false;
}
}
}
<form id='UI'>
<select id='A'>
<option disabled selected hidden>Pick</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
<br>
<select id="B" hidden>
<option selected>Pick B</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<select id="C" hidden>
<option selected>Pick C</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</form>

I give you an example for your reference:
let secondList = [
[{
value: "pleno",
text: "Pleno"
},
{
value: "integrado",
text: "Integrado"
}
],
[
{
value: "junior",
text: "Junior"
},
{
value: "senior",
text: "Senior"
}
]
]
function update(v){
let secondSelectBox=document.getElementById("second");
secondSelectBox.style.display="none";
let optionList=secondList[v.value];
if (optionList){
let defaultOption=new Option("Selecione o produto","");
secondSelectBox.innerHTML="";
secondSelectBox.options.add(defaultOption);
optionList.forEach(o=>{
let vv=new Option(o.text,o.value);
secondSelectBox.options.add(vv);
})
secondSelectBox.style.display="block";
}
}
<select onchange="update(this)">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<select hidden id="second">
</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);
}
}
}

Checking if a select tag has been answered

I have a working script that checks all inputs that have the class "required", it detects if the input has content and then passes the answers to Googles Invisible Recaptcha.
I'm running into an issue with select drop downs.
The following JS is an example that works with the text:
var questions = document.getElementsByClassName('required');
var valid = true;
for (var i=0; valid && i<questions.length; i++) {
if (!questions[i].value.trim()) {
valid = false;
}
}
A sample of one of my dropdowns are:
<select id="q6" class="required" name="designation">
<!-- Disabled -->
<option disabled selected>Select one of the following:</option>
<!-- Options -->
<option value="#">Regisitered Nurse</option>
<option value="#">Regisitered Practical Nurse</option>
<option value="#">Personal Support Worker (Developmental Service Worker)</option>
<option value="#">Nursing Student (Completed First Year)</option>
<!-- Options // END -->
</select>
I was wondering if anyone knows how to add the function to detect an unanswered select drop down to my script above. It would be excellent if we could make this work with a "file" input as well.

Try adding: value="" to your first select option, so by default it is empty, and will fail the validation check.
let validate = function() {
var questions = document.getElementsByClassName('required');
var valid = true;
for (var i = 0; valid && i < questions.length; i++) {
if (!questions[i].value.trim()) {
valid = false;
}
}
console.log(valid);
}
<input id="q5" class="required" name="name" type="text" />
<select id="q6" class="required" name="designation">
<!-- Disabled -->
<option disabled selected value="">Select one of the following:</option>
<!-- Options -->
<option value="#">Regisitered Nurse</option>
<option value="#">Regisitered Practical Nurse</option>
<option value="#">Personal Support Worker (Developmental Service Worker) </option>
<option value="#">Nursing Student (Completed First Year)</option>
<!-- Options // END -->
</select>
<button onclick="validate();">Validate</button>

You can validate using the selectedIndex attribute of the select element and then try getting the value attribute from the selected option if any:
validate = function(){
// Validate Select Elements
var selectElements = document.getElementsByTagName("select");
for(var i = 0; i < selectElements.length; i++)
{
var selectedIndex = selectElements[i].selectedIndex;
if (selectedIndex < 0 || !selectElements[i][selectedIndex].getAttribute("value"))
{
return false;
}
}
// Validate other elements here...
return true;
}
//Clear the selection of the first select element to show how validations work for empty selection
document.getElementById('select1').selectedIndex = -1;
<select id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="">Option With Empty Value Attribute</option>
<option>Option With No Value Attribute</option>
</select>
<br>
<select id="select2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="">Option With Empty Value Attribute</option>
<option>Option With No Value Attribute</option>
</select>
<br><br>
<button onclick="alert(validate());">Validate</button>

multiple select boxes with same options - require unique selection

I have a form with 3 select boxes. Each select box has the same options. I want to require that you have to select a different option for each select box. For example, let's say the options are "cat", "dog" and "bird". If someone selects "bird" in the first select box, I want to disable or hide that option from the other two boxes. If they change their selection, then "bird" will be enabled or unhidden again.
<select id="box1">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
I assume I can do this with jquery onchange but I'm not sure how to require the unique selection across different select boxes.
$('select').on('change', function() {
// If option is selected, disable it in all other select boxes. If option is deselected, reenable it in all other select boxes.
})
Thanks for your help!

1) Top To Bottom Priority Approach
The flow must be top to bottom. This also means when ever the user changes the dropdown value all the next dropdown's which come after it must be reset. Having said this, here is my code snippet.
HandleDropdowns($('#box1')); //initially call this function to handle the dropdowns by passing the first dropdown as parameter
$('select').on('change', function() {
HandleDropdowns($(this)); // handle all dropdowns on any change event.
});
function HandleDropdowns(element) {
var $element = element;
var value = $element.val();
$element.nextAll().val(''); //using nextAll lets reset all the following dropdowns
$element.nextAll().attr('disabled', 'disabled'); //disable all the following dropdowns.
HandleOptions(); // call this function to toggle the options
if (value.length) {
$element.next().removeAttr('disabled'); // only if this dropdown has some selection enable the next dropdown.
}
}
function HandleOptions() {
$('option').removeAttr('disabled'); //reset all the options to be available
$.each($('select'), function() { //loop from top to bottom and disable the options one by one.
var value = $(this).val();
if (value.length) {
$(this).nextAll().find('option[value="' + value + '"]').attr('disabled', 'disabled');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
2) All Select Box With Same Priority Approach
In this approach when ever the user selects a value we check if any other dropdown has the same value, If yes reset it else do nothing. Below is a working sample.
$('select').on('change', function() {
HandleDropdowns($(this));
});
function HandleDropdowns(element) {
var $element = element;
var value = $element.val();
$.each($('select').not($element), function() { //loop all remaining select elements
var subValue = $(this).val();
if (subValue === value) { // if value is same reset
$(this).val('');
console.log('resetting ' + $(this).attr('id')); // demo purpose
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>

Try this
$('select').on('change', function () {
$("select").find("option").removeAttr("disabled");
$("select").not(this).find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
});

You can use onchange listener and evaluate the results simultaneously. Also add an reset button cause once three get selected, it becomes bottle neck case.
The working code is given below
function changeSelect(elements) {
var values = {};
elements.forEach(function(item){
values[item.id] = item.value;
});
elements.forEach(function(item){
for(var i = 0; i < item.children.length; i++) {
for(ids in values) {
if(item.id != ids && item.children[i].value == values[ids]) {
item.children[i].style.display = 'none';
}
}
}
});
}
function resetSelection(elements) {
elements.forEach(function(item){
item.value = '';
for(var i = 0; i < item.children.length; i++) {
item.children[i].style.display = '';
}
});
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var boxArray = [box1, box2, box3];
boxArray.forEach(function(item){
item.addEventListener('change', changeSelect.bind(undefined,boxArray));
});
document.getElementById('reset').addEventListener('click', resetSelection.bind(undefined,boxArray));
<select id="box1">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<button id="reset">Reset</button>

how to display selected value from dropdownlist to label using javascript

I have 3 drop-down lists in my form. I want to display the selected value from each dropdown list to my label. The problem is that only one dropbox list will display, while the other two won't.
Here is my code:
<script>
window.onload = function()
{
document.getElementsByName('mydropdown')[0].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
</script>
this is my html
<td><select name="mydropdown" id="mydrop" onchange="">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>
<td><select name="mydropdown" id="mydrop">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select>
<td><label id="mylabel"></label></td>

You're only binding the zeroth element (the one you selet) with [0]. You need to bind to all of them, possibly like so:
Array.prototype.forEach.call(document.getElementsByName('mydropdown'),
function (elem) {
elem.addEventListener('change', function() {
document.getElementById('mylabel').innerHTML = this.value;
});
});
http://jsfiddle.net/UNLnx/
By the way you are reusing the same ID on multiple elements which is invalid.

Update: Working example: http://jsfiddle.net/x8Rdd/1/
That's because you are only setting the onchange event for the first element in your "mydropdown" group.
<script>
window.onload = function()
{
var dd = document.getElementsByName('mydropdown');
for (var i = 0; i < dd.length; i++) {
dd[i].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
}
</script>
Or something like that. If you're using jQuery then you can set the onchange property for all of them without the loop.