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
Related
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>
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.
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();
I've created dynamic dropdown list and I want to obtain values from selected option. Dynamic dropdown works fine but I have struggle with taking values from selected option.
For example I want to take value of avgDamage from selected object tpPrototype.
Need some help here
HTML:
<form name="myform" id="myForm">
<p>tank 1</p>
<div class="select">
<select classname="optone" id="tankSel" size="1">
<option value="" selected="selected">Tank Nation</option>
</select>
</div>
<div class="select">
<select name="opttwo" id="typeSel" size="1">
<option value="" selected="selected">Tank Type</option>
</select>
</div>
<div class="select">
<select name="optthree" id="nameSel" size="1">
<option value="" selected="selected">Tank Name</option>
</select>
</div>
</form>
JavaScript:
const tpPrototype = {
name: "50TP prototyp",
avgDamage: 440,
healthPool: 1500,
reloadTime: 13.62,
},
tpMarkowskiego = {
name: "53TP prototyp",
avgDamage: 420,
healthPool: 1450,
reloadTime: 12.18,
},
proggettoM35 = {
name: "Progetto M35 mod.46",
avgDamage: 240,
healthPool: 1400,
reloadTime: 1,
},
window.onload = function () {
let tankSel = document.getElementById("tankSel");
typeSel = document.getElementById("typeSel");
nameSel = document.getElementById("nameSel");
for (let tank in tankObject) {
tankSel.options[tankSel.options.length] = new Option(tank, tank);
}
tankSel.onchange = function () {
typeSel.length = 1;
nameSel.length = 1;
if (this.selectedIndex < 1) return;
for (let type in tankObject[this.value]) {
typeSel.options[typeSel.options.length] = new Option(type, type);
}
};
tankSel.onchange();
typeSel.onchange = function () {
nameSel.length = 1;
if (this.selectedIndex < 1) return;
let names = tankObject[tankSel.value][this.value];
for (let i = 0; i < names.length; i++) {
nameSel.options[nameSel.options.length] = new Option(names[i], names[i]);
}
};
This looks like a duplicate of question 1085801
Basically, once you have the selection object, you access the "value" attribute through:
var selectedValue = selectionObject.options[index].value;
or you can access the actual text, such as "Tank Type" in your initial HTML as:
var selectedText = selectionObject.options[index].text;
Once you have this, you should just be able to use that value/text to access your "tankObject" property:
var selectedAvgDamage = tpPrototype[selectedText];
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