Develop Reference

Cascading Dropdown with multiselect options

I built my cascading dropdown with three options , i need to have the second one with multiple choice but if i put multiple on , it's so ugly so can i some one help me to have one nice , i do it on wordpress but i generate all with this script
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic" multiple>
<option value="" selected="selected" >Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
I want to have this solution but i can't make it maybe because the list is generated by JS .
enter image description here

(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();

Why doesn't this JsFiddle load on my page? (using Brackets)

I'm using Brackets.
For the first time, I'm trying to implement a script.
So I want to use this person's script:
https://jsfiddle.net/patelriki13/m1ezs70o/
I pasted the Javascript portion inside the <head> tag
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 pasted the HTML portion inside the <body> tag
<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>
And yet when the page loads, when I click on the dropdown boxes, none of the options from the Javascript code show up.
Is there some additional step I'm missing here? First time trying with scripts.

Issue was solved by placing the <script> at the end of body. Seemed like it was interfering with other possible loads.
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]);
}
}
}
<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>
<p>First select a country => state => city => zipcode</p>

I also faces same issue. I created another fiddle with same Data and surprisingly it wasn't loading.
I also check if there is any additional library added. But no library was attached.
Finally in jsfiddle => js tab, there is option to select load type and it was on load I changed it to bottom of Head and it worked.
So if we put script inside head section or on top. JS will not work. It has to be at bottom. after HTMl loads.
Fiddle

(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>