Develop Reference

Hide/Show next Select-statement when an Option is Picked in my first Select-statement

I'm currently trying to hide the subcategory-select-statement for aslong as there is no maincategory picked in my first select-statement. The same counts for the select-type-statement within the subcategory. The method for a cascading dropdown I use is the same you can find on w3schools, otherwise the code is down below.
Do you know how i can hide the subcategory/type while the select-hierarchy above isn't selected?
For example:
Choose Maincategory(default is "Select Category)", when I change "Select Category" to "MainCategory1" then the select statement of the subcategory appears. Then when the Subcategory option is picked, the typecategory select statement appears.
I hope it is clear what I want to do. Furthermore please excuse my bad use of english. English is not my mother tongue.
var maincatObject = {
"MainCategory1": {
"Subcategory 1.1": ["Type 1.1.1", "Type 1.1.2"],
"Subcategory 1.2": ["Type 1.2.1", "Type 1.2.2"],
"Subcategory 1.3": ["Type 1.3.1", "Type 1.3.2"],
"Subcategory 1.4": ["Type 1.4.1", "Type 1.4.2"]
},
"MainCategory2": {
"Subcategory 2.1": ["Type 2.1.1", "Type 2.1.2"],
"Subcategory 2.2": ["Type 2.2.1", "Type 2.2.2"],
"Subcategory 2.3": ["Type 2.3.1", "Type 2.3.2"],
"Subcategory 2.4": ["Type 2.4.1", "Type 2.4.2"]
}
}
window.onload = function() {
var maincatSel = document.getElementById("maincat");
var subcatSel = document.getElementById("subcat");
var typedevSel = document.getElementById("typedev");
for (var x in maincatObject) {
maincatSel.options[maincatSel.options.length] = new Option(x, x);
}
maincatSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
typedevSel.length = 1;
subcatSel.length = 1;
//display correct values
for (var y in maincatObject[this.value]) {
subcatSel.options[subcatSel.options.length] = new Option(y, y);
}
}
subcatSel.onchange = function() {
//empty Chapters dropdown
typedevSel.length = 1;
//display correct values
var z = maincatObject[maincatSel.value][this.value];
for (var i = 0; i < z.length; i++) {
typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
}
}
}
<select name="maincat" id="maincat">
<option value="" selected="selected">Select Category</option>
</select>
<br><br> Sub-Category:
<select name="subcat" id="subcat">
<option value="" selected="selected">Please select sub-category first</option>
</select>
<br><br> Type/Device:
<select name="typedev" id="typedev">
<option value="" selected="selected">Please select type or device</option>
</select>
<br><br>
Solution:
I managed to do it, for those of you who wonder how I did it... here's the modified JS code:
window.onload = function() {
var maincatSel = document.getElementById("maincat");
var subcatSel = document.getElementById("subcat");
var typedevSel = document.getElementById("typedev");
for (var x in maincatObject) {
maincatSel.options[maincatSel.options.length] = new Option(x, x);
subcatSel.style.display = 'none';
typedevSel.style.display = 'none';
}
maincatSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
subcatSel.style.display = 'block';
typedevSel.style.display = 'none';
subcatSel.length = 1;
typedevSel.length = 1;
//display correct values
for (var y in maincatObject[this.value]) {
subcatSel.options[subcatSel.options.length] = new Option(y, y);
}
}
subcatSel.onchange = function() {
//empty Chapters dropdown
typedevSel.style.display = 'block';
typedevSel.length = 1;
//display correct values
var z = maincatObject[maincatSel.value][this.value];
for (var i = 0; i < z.length; i++) {
typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
}
}
}
The trick was simply to place "variablename.style.display = 'none'/'block';" on the right position. Keep in mind that the code reads from above and for the rest I just used my brain, hehe. I hope this will help anyone who searches for answeres. :)

Try this code
<style>
#sub1, #type1{
display: none;
}
</style>
<select name="main" id="main">
<option value="0" selected>Select Option</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<select name="sub1" id="sub1">
<option value="0" selected>Select Option</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<select name="type1" id="type1">
<option value="0" selected>Select Option</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<script>
var main = document.getElementById('main');
var sub1 = document.getElementById('sub1');
var type1 = document.getElementById('type1');
main.addEventListener('change', function(element){
if(element.target.value == 'value1'){
sub1.style.display = 'block';
}else{
sub1.style.display = 'none';
}
});
sub1.addEventListener('change', function(element){
if(element.target.value == 'value1'){
type1.style.display = 'block';
}else{
type1.style.display = 'none';
}
});
</script>

(Modifying JSFiddle) How do I make an additional level dropdown based on what was selected on the previous dropdown?

i am using this jsfiddle as a reference: https://jsfiddle.net/patelriki13/m1ezs70o/
which is a cascading dropdown using countries as items. I am trying to add another level to this, where instead of 4 levels, it would be 5. I've tried to add another set of objects that are street names before the "zips" and adding another onchange function for it based off of one of the onchange functions below, but it's not working. How do I go about in achieving this?
HTML:
<form name="myform" id="myForm">
<select id="countySel" size="1">
<option value="" selected="selected">-- Select Country --</option>
</select>
<br>
<br>
<select id="stateSel" size="1">
<option value="" selected="selected">-- Select State--</option>
</select>
<br>
<br>
<select id="citySel" size="1">
<option value="" selected="selected">-- Select City--</option>
</select>
<br>
<br>
<select id="zipSel" size="1">
<option value="" selected="selected">-- Select Zip--</option>
</select>
</form>
JAVASCRIPT:
var countryStateInfo = {
"USA": {
"California": {
"Los Angeles": ["90001", "90002", "90003", "90004"],
"San Diego": ["92093", "92101"]
},
"Texas": {
"Dallas": ["75201", "75202"],
"Austin": ["73301", "73344"]
}
},
"India": {
"Assam": {
"Dispur": ["781005"],
"Guwahati" : ["781030", "781030"]
},
"Gujarat": {
"Vadodara" : ["390011", "390020"],
"Surat" : ["395006", "395002"]
}
}
}
window.onload = function () {
//Get html elements
var countySel = document.getElementById("countySel");
var stateSel = document.getElementById("stateSel");
var citySel = document.getElementById("citySel");
var zipSel = document.getElementById("zipSel");
//Load countries
for (var country in countryStateInfo) {
countySel.options[countySel.options.length] = new Option(country, country);
}
//County Changed
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var state in countryStateInfo[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
//State Changed
stateSel.onchange = function () {
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var city in countryStateInfo[countySel.value][this.value]) {
citySel.options[citySel.options.length] = new Option(city, city);
}
}
//City Changed
citySel.onchange = function () {
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
for (var i = 0; i < zips.length; i++) {
zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
}
}
}
Any help in pointing me in the right direction would be appreciated.

Can't populate multiple dropdowns with JSON data, no errors

I have a JSON file with the information of watches. I want to build a simple form that allows a user to select a brand of watch, then the second dropdown would be populated with the values within "Model" and the final dropdown would be populated with the values within "Movement".
I've built what I assume to be right only it isn't working and I'm getting no errors?
HTML
<form name="myform" id="myForm">
<select name="optone" id="brands" size="1">
<option value="" selected="selected">Select a brand</option>
</select>
<br>
<br>
<select name="opttwo" id="model" size="1">
<option value="" selected="selected">Please select model</option>
</select>
<br>
<br>
<select name="optthree" id="movement" size="1">
<option value="" selected="selected">Please select a movement</option>
</select>
</form>
HTML
var watches = {
"Rolex": {
"Model": [
"Submariner",
"Yachtmaster",
"Oyster",
"Datejust"
],
"Movement": [
{
"label": "OysterDate",
"Id": "6694"
},
{
"label": "Hulk",
"Id": "3920"
},
{
"label": "DeepSea",
"Id": "2342"
}
]
},
"Omega": {
"Model": [
"Seamaster",
"Speedmaster",
"MoonWatch"
],
"Movement": [
]
}
}
window.onload = function () {
var brands = document.getElementById("brands"),
model = document.getElementById("model"),
movement = document.getElementById("movement");
for (var brand in watches) {
brands.options[brands.options.length] = new Option(brands, brands);
}
brands.onchange = function () {
model.length = 1; // remove all options bar first
testCase.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var model in watches[this.value]) {
model.options[model.options.length] = new Option(model, model);
}
}
brands.onchange(); // reset in case page is reloaded
model.onchange = function () {
movement.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var movement = watches[brand.value][this.value];
alert(movement);
for (var i = 0; i < movement.length; i++) {
movement.options[movement.options.length] = new Option(movement, movement);
}
}
}
watches();
https://jsfiddle.net/z3xcyprt/3/

Ok, there were a lot of issues here.
Mainly over writing your variable names, but also incorrect navigation of array values, using the for( x in obj) when you should use forEach(func())
Also note that you JSON does not have a relationship between Model and Movement I noted this in the script, but you will likely want to look at that.
var watches = {
"Rolex": {
"Model": [
"Submariner",
"Yachtmaster",
"Oyster",
"Datejust"
],
"Movement": [
{
"label": "OysterDate",
"Id": "6694"
},
{
"label": "Hulk",
"Id": "3920"
},
{
"label": "DeepSea",
"Id": "2342"
}
]
},
"Omega": {
"Model": [
"Seamaster",
"Speedmaster",
"MoonWatch"
],
"Movement": [
]
}
}
const createOption = (value, text) => {
let opt = document.createElement('option');
opt.value = value;
opt.text = text;
return opt;
};
window.onload = function () {
var brands = document.getElementById("brands"),
model = document.getElementById("model"),
movement = document.getElementById("movement");
for (var brand in watches) {
brands.options.add(createOption(brand, brand));
}
brands.onchange = function () {
model.length = 1; // remove all options bar first
if (brands.selectedIndex < 1) return; // done
// This is an array of string.
watches[brands.value].Model.forEach(m => {
model.add( createOption(m, m));
});
}
// There is NO link in the JSON between model and movement ?
model.onchange = function () {
movement.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
watches[brands.value].Movement.forEach(m => {
movement.options.add(createOption(m.Id, m.label));
});
}
}
// This does nothing.
//watches();
<form name="myform" id="myForm">
<select name="optone" id="brands">
<option value="" selected="selected">Select a brand</option>
</select>
<br>
<br>
<select name="opttwo" id="model">
<option value="" selected="selected">Please select model</option>
</select>
<br>
<br>
<select name="optthree" id="movement">
<option value="" selected="selected">Please select a movement</option>
</select>
</form>

Try with this.
On window.onload function you are declaring the brands, model but you are overriding it in the loops.
Also read about the differences between for ... of and for ... in
window.onload = function () {
var brands = document.getElementById("brands"),
model = document.getElementById("model"),
movement = document.getElementById("movement");
for (var brand in watches) {
brands.options[brands.options.length] = new Option(brand);
}
brands.onchange = function () {
if (this.selectedIndex < 1) return; // done
for (var modelValue of watches[this.value].Model) {
model.options[model.options.length] = new Option(modelValue);
}
}
brands.onchange(); // reset in case page is reloaded
model.onchange = function () {
if (this.selectedIndex < 1) return; // done
var movementValue = watches[brands.value].Movement;
for (var i = 0; i < movementValue.length; i++) {
movement.options[movement.options.length] = new Option( movementValue[i].label, movementValue[i].Id);
}
}
}
watches();

(Modifying JSFiddle) How do you make dropdown boxes only visible depending on what you selected in a previous dropdown box?

This is what I'm using as a base: https://jsfiddle.net/patelriki13/m1ezs70o/
But instead, I'm trying to make it so that the dropdowns below the Country Dropdown do not appear UNTIL you select a country. Also, I want to add a third Country option, where if you chose it, the next dropdown boxes would remain hidden.
Any help on achieving this, please?
HTML:
<form name="myform" id="myForm">
<select id="countySel" size="1">
<option value="" selected="selected">-- Select Country --</option>
</select>
<br>
<br>
<select id="stateSel" size="1">
<option value="" selected="selected">-- Select State--</option>
</select>
<br>
<br>
<select id="citySel" size="1">
<option value="" selected="selected">-- Select City--</option>
</select>
<br>
<br>
<select id="zipSel" size="1">
<option value="" selected="selected">-- Select Zip--</option>
</select>
</form>
JavaScript:
var countryStateInfo = {
"USA": {
"California": {
"Los Angeles": ["90001", "90002", "90003", "90004"],
"San Diego": ["92093", "92101"]
},
"Texas": {
"Dallas": ["75201", "75202"],
"Austin": ["73301", "73344"]
}
},
"India": {
"Assam": {
"Dispur": ["781005"],
"Guwahati": ["781030", "781030"]
},
"Gujarat": {
"Vadodara": ["390011", "390020"],
"Surat": ["395006", "395002"]
}
}
}
window.onload = function() {
//Get html elements
var countySel = document.getElementById("countySel");
var stateSel = document.getElementById("stateSel");
var citySel = document.getElementById("citySel");
var zipSel = document.getElementById("zipSel");
//Load countries
for (var country in countryStateInfo) {
countySel.options[countySel.options.length] = new Option(country, country);
}
//County Changed
countySel.onchange = function() {
stateSel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var state in countryStateInfo[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
//State Changed
stateSel.onchange = function() {
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var city in countryStateInfo[countySel.value][this.value]) {
citySel.options[citySel.options.length] = new Option(city, city);
}
}
//City Changed
citySel.onchange = function() {
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
for (var i = 0; i < zips.length; i++) {
zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
}
}
}

I wrote this quickly for you. You can upgrade it and make it more optimized.
You can find some toggle functions added to your code and some lines of codes which are calling them.
var countryStateInfo = {
"USA": {
"California": {
"Los Angeles": ["90001", "90002", "90003", "90004"],
"San Diego": ["92093", "92101"]
},
"Texas": {
"Dallas": ["75201", "75202"],
"Austin": ["73301", "73344"]
}
},
"India": {
"Assam": {
"Dispur": ["781005"],
"Guwahati": ["781030", "781030"]
},
"Gujarat": {
"Vadodara": ["390011", "390020"],
"Surat": ["395006", "395002"]
}
}
}
window.onload = function() {
//Get html elements
var countySel = document.getElementById("countySel");
var stateSel = document.getElementById("stateSel");
var citySel = document.getElementById("citySel");
var zipSel = document.getElementById("zipSel");
//Load countries
for (var country in countryStateInfo) {
countySel.options[countySel.options.length] = new Option(country, country);
}
//County Changed
countySel.onchange = function() {
stateSel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
toggleState(false);
return; // done
}
toggleState(true);
for (var state in countryStateInfo[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
//State Changed
stateSel.onchange = function() {
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
toggleCity(false);
return; // done
}
toggleCity(true);
for (var city in countryStateInfo[countySel.value][this.value]) {
citySel.options[citySel.options.length] = new Option(city, city);
}
}
//City Changed
citySel.onchange = function() {
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
toggleZip(false);
return; // done
}
toggleZip(true);
var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
for (var i = 0; i < zips.length; i++) {
zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
}
}
function toggleState(show) {
show = show || false;
if (show) {
stateSel.style.display = '';
return;
}
stateSel.style.display = 'none';
toggleCity(show);
}
function toggleCity(show) {
show = show || false;
if (show) {
citySel.style.display = '';
return;
}
citySel.style.display = 'none';
toggleZip(show);
}
function toggleZip(show) {
show = show || false;
if (show) {
zipSel.style.display = '';
return;
}
zipSel.style.display = 'none';
}
var event = new Event('change');
countySel.dispatchEvent(event);
}
<form name="myform" id="myForm">
<select id="countySel" size="1">
<option value="" selected="selected">-- Select Country --</option>
</select>
<br>
<br>
<select id="stateSel" size="1">
<option value="" selected="selected">-- Select State--</option>
</select>
<br>
<br>
<select id="citySel" size="1">
<option value="" selected="selected">-- Select City--</option>
</select>
<br>
<br>
<select id="zipSel" size="1">
<option value="" selected="selected">-- Select Zip--</option>
</select>
</form>

How to sort values in my json object

I would like to sort "years" in yearObject of type Object so the menu starts with 2016 instead of 2013. Please help. Example of code is provided here.
My HTML:
<form name="myform" id="myForm">
<select name="optone" id="yearSel" size="1">
<option value="" selected="selected">Select Year</option>
</select>
<br>
<br>
<select name="opttwo" id="stateSel" size="1">
<option value="" selected="selected">Please select year first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1" citySel.onchange = function();>
<option value="" selected="selected">Please select state first</option>
</select>
</form>
My JS:
var yearObject = {
"2016": {
"California": ["Los Angeles", "San Francisco"],
"Florida": ["Orlando", "Miami"],
"New York": ["Manhattan","Brooklyn"]
},
"2015": {
"California": ["Los Angeles", "San Francisco"],
"Florida": ["Orlando", "Miami"],
"New York": ["Manhattan","Brooklyn"]
},
"2014": {
"California": ["Los Angeles", "San Francisco"],
"Florida": ["Orlando", "Miami"],
"New York": ["Manhattan","Brooklyn"]
},
"2013": {
"California": ["Los Angeles", "San Francisco"],
"Florida": ["Orlando", "Miami"],
"New York": ["Manhattan","Brooklyn"]
}
}
window.onload = function () {
var yearSel = document.getElementById("yearSel"),
stateSel = document.getElementById("stateSel"),
citySel = document.getElementById("citySel");
for (var year in yearObject) {
yearSel.options[yearSel.options.length] = new Option(year, year);
}
yearSel.onchange = function () {
stateSel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
stateSel.options[0].text = "Please select Year first"
citySel.options[0].text = "Please select state first"
return; // done
}
stateSel.options[0].text = "Please select state"
for (var state in yearObject[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
if (stateSel.options.length==2) {
stateSel.selectedIndex=1;
stateSel.onchange();
}
}
yearSel.onchange(); // reset in case page is reloaded
stateSel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
citySel.options[0].text = "Please select state first"
return; // done
}
citySel.options[0].text = "Please select city"
var cities = yearObject[yearSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
if (citySel.options.length==2) {
citySel.selectedIndex=1;
citySel.onchange();
}
}
citySel.onchange = function(){
switch(citySel.value){
case "Los Angeles":
if(yearSel.value == "2016"){
location.href="http://google.com";
}else if(yearSel.value == "2015","2014"){
location.href= "http://facebook.com";
}
break;
case "Miami":
if(yearSel.value == "2016","2015"){
location.href="http://google.com";
}else if(yearSel.value == "2014","2013"){
location.href= "http://facebook.com";
}
break;
}
}
}

You need to create separate array for year and sort it using sort() function in javascript.
var sortable = [];
for (var year in yearObject) {
sortable.push(year);
}
sortable.sort(function(a, b){return b-a});
for (var i = 0; i < sortable.length; i++){
yearSel.options[yearSel.options.length] = new Option(sortable[i], sortable[i]);
}
Have a look at the Fiddle