Develop Reference

How can I fill a probably infinite amount of dropdowns iterating through objects from a JSON file?

So, I'm trying to fill three separate dropdown menus (could end up being more) with objects pulled from different JSON files depending on the selection from each dropdown. So first selection fills the second one, and so on.
These are the dropdown menus:
<form>
<div>
<select id="level1">
<option selected value="base">Please select one</option>
<option value="first-option">First one</option>
<option value="second-option">Second one</option>
</select>
</div>
<div>
<select id="level2" class="form-control">
<option selected value="base">Please select one</option>
</select>
</div>
<div>
<select id="level3" class="form-control">
<option selected value="base">Please select one</option>
</select>
</div>
<div id="submit">
<button type="submit">Go</button>
</div>
</form>
This is a sample JSON file:
{
"first_option": {
"me": "first_option",
"COD_REF": "MX09017CL01AP",
"TITLE": "First Option",
"children": {
"child01": {
"me": "child01",
"COD_REF": "001",
"TITLE": "Child 1",
"children": {
"grandchild01": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
},
"grandchild02": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
}
}
}
},
"child02": {
"me": "child02",
"COD_REF": "002",
"TITLE": "Child 2",
"children": {
"grandchild01": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
},
"grandchild02": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
}
}
},
}
}
The solution I came up with works just fine. The thing is I could probably do with some iteration, I just don't know how to do it. Here's an abridged version of what I have:
var vals = [];
var $level1 = $("#level1");
var $level2 = $("#level2");
var $level3 = $("#level3");
function generateTable(info) {
$(".COD_REF").innerHTML(info.COD_REF);
$(".TITLE").innerHTML(info.TITLE);
};
function generateTable2(info) {
$(".COD_REF").innerHTML(info.COD_REF);
$(".TITLE").innerHTML(info.TITLE);
}
function generateTable3(info) {
$(".COD_REF").innerHTML(info.COD_REF);
$(".TITLE").innerHTML(info.TITLE);
}
//first dropdown
$("#level1").change(function () {
var $dropdown = $(this);
var key = $dropdown.val();
function generateDropdown(vals) {
$level2.append("<option selected value=\"base\">Please select one</option>");
$.each(vals, function (index, value) {
$level2.append("<option value=\"" + value.me + "\">" + value.TITLE + "</option>");
});
};
switch (key) {
case 'first_option':
$.getJSON("recursos/json/ajsonfile.json", function (data) {
$level2.empty();
vals = data.first_option.children;
generateDropdown(vals)
$("#first-table").removeClass("d-none");
$("#first-table").addClass("d-block");
info = data.first_option;
$(".first-title").innerHTML(info.TITLE);
generateTable(info);
});
break
case 'second_option':
$.getJSON("recursos/json/anotherjsonfile.json", function (data) {
$level2.empty();
vals = data.second_option.children;
generateDropdown(vals)
$("#first-table").removeClass("d-none");
$("#first-table").addClass("d-block");
info = data.second_option;
$(".first-title").innerHTML(info.TITLE);
generateTable(info);
});
break
case 'base':
$level2.empty();
vals = ['Please select one'];
$level2.append("<option>" + vals + "</option>");
$("#first-table").removeClass("d-block");
$("#first-table").addClass("d-none");
console.log(vals);
break
}
});
//second dropdown
$("#level2").change(function () {
var $dropdown = $(this);
var key = $dropdown.val();
function generateDropdown(vals) {
$level3.append("<option selected value=\"base\">Please select one</option>");
$.each(vals, function (index, value) {
$level3.append("<option value=\"" + value.yo + "\">" + value.TITLE + "</option>");
});
};
switch (key) {
case 'first-child':
$.getJSON("recursos/json/ajsonfile.json", function (data) {
$level3.empty();
vals = data.first_option.children.child01.children;
generateDropdown(vals)
$("#second-table").removeClass("d-none");
$("#second-table").addClass("d-block");
info = data.first_option.children.child01;
$(".second-title").innerHTML(info.TITLE);
generateTable2(info);
});
break
//second, third, fourth child options etc.
case 'base':
$level3.empty();
vals = ['Please select one'];
$level3.append("<option>" + vals + "</option>");
$("#cedula2").removeClass("d-block");
$("#cedula2").addClass("d-none");
console.log(vals);
break
}
});
//third dropdown
$("#level3").change(function () {
// I think you get the gist
});
Is it possible to do some iteration so I can fill all the dropdowns in just one loop?

Change Variable Value using a function with select values

How can I change the value of a variable which is outside a function. I want the variable "yr" in my code to be updated with a value from select form by the function update variable.
I looking to update the variable "yr", with the value from the drop down list in my html below. Then I want to use the value of "yr" in another variable called chart4. I have updated the code below.
var yr = "2017";
function updatevariable(data) {
yr = data;
console.log(yr);
};
var chart4 = {
"columns": [
{
"dimension": "dx",
"items": [
{
"id": "fbfJHSPpUQD"
}
]
}
],
"rows": [
{
"dimension": "pe",
"items": [
{
"id": yr
}
]
}
],
"filters": [
{
"dimension": "ou",
"items": [
{
"id": "fdc6uOvgoji"
}
]
}
],
"el": "chart4"
};
<select id="year" name="year" onchange="updatevariable(this.value)">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
</select>

The function you written is correct one to change the value of the variable outside the function.
And a simple demo to understand that,
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var yr = "2017";
function updatevariable(data) {
yr = data;
};
function print(){
alert(yr);
console.log(yr);
}
</script>
</head>
<body>
<select id="year" name="year" onchange="updatevariable(this.value)">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
</select>
<button onclick="print()">Updated date</button>
</body>
</html>

Simply adding an assignment to the yr inside char4 every time the drop down menu is changed.
Hope this will help!
var yr = "2017";
function updatevariable(data) {
yr = data;
chart4.rows[0].items[0].id = yr;
console.log(chart4.rows[0].items[0].id);
};
var chart4 = {
"columns": [
{
"dimension": "dx",
"items": [
{
"id": "fbfJHSPpUQD"
}
]
}
],
"rows": [
{
"dimension": "pe",
"items": [
{
"id": yr
}
]
}
],
"filters": [
{
"dimension": "ou",
"items": [
{
"id": "fdc6uOvgoji"
}
]
}
],
"el": "chart4"
};

Javascript Chain Dropdown Select

I know that there are a lot of this questions being posted online but I still have difficulty finding what I need.
Currently I have found something that is doing 3 chained dropdown selection maximum. I needed to have 4 and I have tried editing the script but it's not working.
Below is the code that I have edited, is there anything wrong with my code?
<html>
<head>
<script type="text/javascript">
// State lists
var states = new Array();
states[0] = new Array('Alberta','British Columbia','Ontario');
states[1] = new Array('Baja California','Chihuahua','Jalisco');
states[2] = new Array('California','Florida','New York');
// Province lists
var provinces = new Array();
provinces[0] = new Array();
provinces[0][0] = new Array("Province1", "Province2");
// City lists
var cities = new Array();
cities[0][0] = new Array();
cities[0][0][0] = new Array('Edmonton','Calgary');
cities[0][0][1] = new Array('Victoria','Vancouver');
function setStates(){
cntrySel = document.getElementById('country');
stateList = states[cntrySel.selectedIndex];
changeSelect('state', stateList);
setProvinces();
}
function setProvinces(){
cntrySel = document.getElementById('country');
stateSel = document.getElementById('state');
provinceList = provinces[cntrySel.selectedIndex][stateSel.selectedIndex];
changeSelect('province', provinceList);
setCities();
}
function setCities(){
cntrySel = document.getElementById('country');
stateSel = document.getElementById('state');
provinceList = document.getElementById('province');
cityList = cities[cntrySel.selectedIndex][stateSel.selectedIndex][provinceList.selectedIndex];
changeSelect('city_town_district', cityList);
}
function changeSelect(fieldID, newList) {
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
for (i=0; i<newList.length; i++) {
selectField.options[selectField.length] = new Option(newList[i], newList[i], newList[i]);
}
}
</script>
</head>
<body onload="setStates();">
<form name="test">
Country:
<select name="country" id="country" onchange="setStates();">
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="United States">United States</option>
</select>
<br>
State:
<select name="state" id="state" onchange="setProvinces();">
<option value="">Please select a State</option>
</select>
<br>
Province:
<select name="province" id="province" onchange="setCities();">
<option value="">Please select a Province</option>
</select>
<br>
City:
<select name="city_town_district" id="city_town_district">
<option value="">Please select a City</option>
</select>
</form>
</body>
</html>
Any help will be much appreciated! Thanks in advance!

Old question, one answer and everybody have to do this sometimes.
The year is 2018 and I find a easy way to do this. Easy to add, edit and receive data from server. Bye!
JSFiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select name="slc1" id="slc1" onchange="_1sel();"></select>
<select name="slc2" id="slc2" onchange="_2sel();"></select>
<select name="slc3" id="slc3" onchange="_3sel();"></select>
<select name="slc4" id="slc4"></select>
<script>
//just call the method when the select change
var slc1 = document.getElementById("slc1");
var slc2 = document.getElementById("slc2");
var slc3 = document.getElementById("slc3");
var slc4 = document.getElementById("slc4");
var dataObj = {//is a valid json
"brazil": {
"sp": {
"sp1": ["sp1A", "sp1B"],
"sp2": ["sp2A"]
},
"mg": {
"mg1": ["mg1A", "mg1B"],
"mg2": ["mg2A", "mg1B"]
},
"rj": {
"rj1": ["rj1A", "rj1B", "rj1C"],
"rj2": ["rj2A", "rj1B"]
}
},
"usa": {
"ny": {
"ny1": ["ny1A","ny1B","ny1C"],
"ny2": ["ny2A"]
},
"tx": {
"tx1": ["tx1A"]
}
},
"uk": {
"ld": {
"ld1": ["ld1A","ld1B","ld1C"],
"ld2": ["ld2A"]
},
"hm": {
"hm1": ["hm1A", "hm1B"]
}
}
}
let ctrs = Object.keys(dataObj);//countries - Object.keys return an array
cmo(ctrs, slc1);//push values to select one
_1sel();//call the first method of chain
//slc1.value = "usa"
//slc1.dispatchEvent(new Event('change'));
function _1sel() {
slc2.innerHTML = "";//clear the target select
let cities = Object.keys(dataObj[slc1.value]);//get the cities from country as array
cmo(cities, slc2);//push values to select two
_2sel();//call the second method of chain
}
function _2sel() {
slc3.innerHTML = "";//clear
let zones = Object.keys(dataObj[slc1.value][slc2.value]);//get the zones from country and city as array
cmo(zones, slc3);//push values to select three
_3sel();//call the third method of chain
}
function _3sel() {
slc4.innerHTML = "";//clear
let staffs = dataObj[slc1.value][slc2.value][slc3.value];//no Obj.keys here, just get the array of values
cmo(staffs, slc4);//push values to select four
}
function cmo(arr, s) {//create options and add to select
arr.forEach(o => {
let opt = document.createElement("option");
opt.value = o;
opt.innerHTML = o;
s.add(opt);
});
}
</script>
</body>
</html>

This is not perfect by any means but it should get you going. Instead of having unrelated arrays I suggest you use some object oriented principles. I've chosen to use JSON to describe the relationships in the data. The other advantage to using JSON is that many server side languages have JSON serializers available to them.
I have kept as much of your code as possible so there is some familiarity for you. However inline event handling is not considered best practice these days. You should look at Event Listeners/Handlers instead. Or if it was me I would be using jQuery as it irons out much of the cross browser issues you can come across.
/*Use JSON to describe data and its relationship*/
var countries = [{
"CountryName": "Canada",
"States": [{
"StateName": "British Columbia",
"Provences": [{
"ProvenceName": "BC P1",
"Cities": ["Vancouver"]
}, {
"ProvenceName": "BC P2",
"Cities": ["Whistler"]
}]
}, {
"StateName": "Ontario ",
"Provences": [{
"ProvenceName": "Ot 1",
"Cities": ["Ontario"]
}, {
"ProvenceName": "Ot 2",
"Cities": ["Toronto"]
}]
}]
}, {
"CountryName": "United States",
"States": [{
"StateName": "New York",
"Provences": [{
"ProvenceName": "NY P1",
"Cities": ["New York", "New Jersy"]
}, {
"ProvenceName": "NY P2",
"Cities": ["Buffalo"]
}]
}, {
"StateName": "California",
"Provences": [{
"ProvenceName": "South",
"Cities": ["Los Angeles", "San Dieago"]
}, {
"ProvenceName": "North",
"Cities": ["San Francisco"]
}]
}]
}];
var selectedCountry;
var selectedState;
var selectedProvence;
var stateList = document.getElementById("state");
var provenceList = document.getElementById("province");
var cityList = document.getElementById("city_town_district");
function setStates(selectedIndex) {
selectedCountry = countries[selectedIndex];
stateList.options.length = 0;
for (i = 0; i < selectedCountry.States.length; i++) {
stateList.options[stateList.length] = new Option(selectedCountry.States[i].StateName, selectedCountry.States[i].StateName, selectedCountry.States[i].StateName);
}
setProvinces(0);
}
function setProvinces(selectedIndex) {
selectedState = selectedCountry.States[selectedIndex];
console.log(selectedState)
provenceList.options.length = 0;
for (i = 0; i < selectedState.Provences.length; i++) {
provenceList.options[provenceList.length] = new Option(selectedState.Provences[i].ProvenceName, selectedState.Provences[i].ProvenceName, selectedState.Provences[i].ProvenceName);
}
setCities(0);
}
function setCities(selectedIndex) {
selectedProvence = selectedState.Provences[selectedIndex];
cityList.options.length = 0;
for (i = 0; i < selectedProvence.Cities.length; i++) {
cityList.options[cityList.length] = new Option(selectedProvence.Cities[i], selectedProvence.Cities[i], selectedProvence.Cities[i]);
}
}
Country:
<select name="country" id="country" onchange="setStates(this.selectedIndex);">
<option value="Canada">Canada</option>
<option value="United States">United States</option>
</select>
<br>State:
<select name="state" id="state" onchange="setProvinces(this.selectedIndex);">
<option value="">Please select a State</option>
</select>
<br>Province:
<select name="province" id="province" onchange="setCities(this.selectedIndex);">
<option value="">Please select a Province</option>
</select>
<br>City:
<select name="city_town_district" id="city_town_district">
<option value="">Please select a City</option>
</select>

Combo Select using json

The country and state will be sent as json
{
"data": [
{
"country": "USA",
"states": [
"Alabama",
"Alaska",
"Arizona"
]
},
{
"country": "India",
"states": [
"TN",
"AP",
"Mumbai"
]
}
]
}
There will be two select tags (country and state). How do I populate the states based on the country selected?
I am looking for a solution similar to http://www.datatables.net/examples/api/row_details.html where the row.data() returns the data set of a particular row.

Here's a very simple pure JavaScript way to populate two select boxes via JSON. In this example, State is dependent upon which Country is selected.
Example: http://jsfiddle.net/wasfd592/
HTML:
<select id="country">
<option>Country</option>
</select>
<select id="state">
<option>State</option>
</select>
JSON Object (assigned to variable d):
var d = {
"data": [
{
"country": "USA",
"states": [
"Alabama",
"Alaska",
"Arizona"
]
},
{
"country": "India",
"states": [
"TN",
"AP",
"Mumbai"
]
}
]
}
JavaScript:
// First - populate the Country select box from the JSON
for (var i in d.data) {
var elem = document.createElement("option");
elem.value = d.data[i].country;
elem.innerHTML = d.data[i].country;
document.getElementById("country").appendChild(elem);
}
// Next - add an event handler that will trigger when Country is changed and populate the State box
document.getElementById("country").addEventListener("change", function () {
document.getElementById("state").innerHTML = "";
var country = document.getElementById("country").options[document.getElementById("country").selectedIndex].value;
if (country === "Country") {
var elem = document.createElement("option");
elem.value = "State";
elem.innerHTML = "State";
document.getElementById("state").appendChild(elem);
}
for (var i in d.data) {
if (d.data[i].country === country) {
for (var a = 0; a < d.data[i].states.length; a++) {
var elem = document.createElement("option");
elem.value = d.data[i].states[a];
elem.innerHTML = d.data[i].states[a];
document.getElementById("state").appendChild(elem);
}
}
}
});

Try this out:- http://jsfiddle.net/ox4ykqoL/
HTML:-
<select id="country"></select>
<select id="states"></select>
JS:-
jQuery(function ($) {
var input = {
"data": [{
"country": "USA",
"states": [
"Alabama",
"Alaska",
"Arizona"]
}, {
"country": "India",
"states": [
"TN",
"AP",
"Mumbai"]
}]
};
$.each(input.data, function (index, d) {
$("#country").append("<option value=\"" + d.country + "\">" + d.country + "</option>");
});
$("#country").on("change", function () {
var selectedCountry = $("#country").val();
var t = $.map(input.data, function (obj) {
if (obj.country === selectedCountry) return obj;
});
if (t.length != 0) {
$('#states').empty();
debugger;
$.each(t[0].states, function (index, d) {
$("#states").append("<option value=\"" + d + "\">" + d + "</option>");
});
}
});
$("#country").change();
});

update html table when dropdown value change

From json i need to update the table based on month and year from javascript.
Any approach is fine for me
For reference i have created the FIDDLEbut it is not complete yet, just want to show the real environment
link: :http://jsfiddle.net/qytdu1zs/1/
HTML
<div class="dropdown">
<select name="one" class="dropdown-select">
<option value="">Select Year</option>
<option value="0">2014</option>
<option value="1">2013</option>
<option value="2">2012</option>
</select>
</div>
<div class="dropdown ">
<select name="two" class="dropdown-select">
<option value="">Select Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
html Table
<div id="example1"></div>
Jquery - i have used mustache.js
$.ajax({
url : 'data/front_finance.json',
dataType : 'json',
success : function (json) {
var customer = $('#example1').columns({
data : json,
schema : [{
"header" : "ID",
"key" : "id",
"template" : "{{id}}"
}, {
"header" : "Name",
"key" : "name",
"template" : '{{name}}'
}, {
"header" : "Actual",
"key" : "actual"
}, {
"header" : "Target",
"key" : "target"
}, {
"header" : "Status",
"key" : "status",
"template" : "<img src ='{{status}}' alt='{{status}}'></img>"
}, {
"header" : "Trend",
"key" : "trend",
"template" : "<img src ='{{trend}}' alt='{{trend}}'></img>"
}
]
});
}
});
JSON
[
{
"year": "2013",
"jan": [
{
"id": 1,
"name": "data",
"actual": "17",
"target": "19",
"status": "red",
"trend": "down"
}
],
"Feb": [
{
"id": 2,
"name": "data1",
"actual": "10",
"target": "19",
"status": "red",
"trend": "down"
}
],
"March": [
{
"id": 3,
"name": "data2",
"actual": "34",
"target": "19",
"status": "green",
"trend": "down"
}
]
},
{
"year": "2014",
"jan": [
{
"id": 1,
"name": "data",
"actual": "17",
"target": "19",
"status": "red",
"trend": "down"
}
],
"Feb": [
{
"id": 2,
"name": "data1",
"actual": "10",
"target": "19",
"status": "red",
"trend": "down"
}
],
"March": [
{
"id": 3,
"name": "data2",
"actual": "34",
"target": "19",
"status": "green",
"trend": "down"
}
]
}
]

NEW FIDDLE FIDDLE
$(document).ready(function (){
cloneObj= $("#example1").clone();
$('select[name=one]').on('change', function() {
var selectedYear=($("option:selected", this).text());
if (selectedYear!="Select Year"){
for (var a in data){
if(data[a].year==selectedYear){
objMonth=data[a];
return false;
}
}
}else{
objMonth=null;
}
});
$('select[name=two]').on('change', function() {
var selectedYear=($("option:selected", $('select[name=one]')).text());
if (selectedYear!="Select Year"){
var selectedMonth=($("option:selected", this).text());
var jsonValue=objMonth[MonthMap[selectedMonth]];
$("#example1").replaceWith(cloneObj.clone());
$('#example1').columns({ data : jsonValue});
}else{
alert("Please Select year please");
}
});
});

I'll give you an approach on how to go about this. Now, I don't know the exact html of your table how the td and tr are structured, so I'm not going to be able to give you exact code that you can replicate.
You let the user select the month and year from the dropdown whose value you can get in jquery. What would help here greatly is if you have the option values set according to the way months are stored in the JSON array.
//JSON array is structured somewhat like:
"jan": [
{
"id": 1,
"name": "data",
"actual": "17",
"target": "19",
"status": "red",
"trend": "down"
}
]
//Your HTML could be
<select name="two" class="dropdown-select">
<option value="">Select Month</option>
<option value="jan">January</option>
<option value="Feb">February</option>
<option value="March">March</option>
Although this is not a necessity, this would greatly help in accessing the corresponding values in the JSON array. Otherwise you would require a mapping of the option values or text to the month names in form of an array or a suitable data structure.
var selectedMonth;
var selectedYear;
//Store the information selected from the dropdown menu for month and year respectively
//Assuming the JSON array is named arr
$.each( arr, function( index, value ) {
if (arr[index]['year'] == selectedYear){
var foo = arr[index]['year'][selectedMonth][0]; //Based on your array defintion
//You can access the required info of this object by simply doing:
//foo.id,foo.name,foo.status etc. and update the relevant table elements' html here
}
});
I hope this gets you started in the right direction.

We have a table ABC. In that table we have a column which contains dropdown as select having value as blank, option a, option b. Now, with change with this dropdown I want to update the input field accordingly, i.e; if a is chosen, input field value will be 100, if b is chosen, input field will be 0 and if blank is chosen, input field will be blank , readonly. The input field id is set to input_ where i is 1 to no of rows in the table.
Below is the code for implementing this.
HTML :
<select id="select" onChange="changeEvent(this.options[this.selectedIndex].value);" name="select">
Javascript:
function changeEvent(chosen) {
var table = document.getElementById("ABC");
var rows = document.querySelectorAll('tr');
var rowsArray = Array.from(rows);
table.addEventListener('change', (event) => {
var target = event.target.toString();
var rowIndex = rowsArray.findIndex(row => row.contains(event.target));
var x = table.rows.length;
var id = "input_"+(parseInt(rowIndex) - 2).toString();
if(chosen === "a") {
table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='100' id='"+id+" 'style='width:50px;'></input></td>";
return;
}else if(chosen === "b"){
table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='0' id='"+id+"' readonly style='width:50px;'></input></td>";
return;
}else{
table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='' id='"+id+"' readonly style='width:50px;'></input></td>";
return;
}
})
}