We Keep Coding

Is it possible to store data in function to an object literal by passing argument to a function?

I added my html and js snippet however it still not completed. Sorry if the code is a bit messy this is my first attempt for me to build something like this on my own.
`
var selectBread = document.querySelectorAll(".bread-select");
var sauceSelect = document.querySelectorAll(".sauces-select");
var checkBoxes = document.getElementsByTagName("input");
var orderModal = document.getElementById("order-modal");
let chosenItem;
let chosenItemPrice;
var ingredients = [];
var ingredientsPrice = [];
let selectedItem;
var sideDishes = [];
var drink = [];
var toasted;
var currentSandwich = {};
var breadAndPrice = [
["baguette", 0.8],
["burger bun", 0.8],
["ciabatta", 0.9],
["focaccia", 1.5],
["ftira", 0.8],
["olive bread", 1.3],
["rye bread", 1.3],
["sliced bread", 0.9],
["tortilla", 1.6],
["wheat bread", 0.9],
["whole grain bread", 1.2]
];
var sauceAndPrice = [
["chili sauce", 0.25],
["garlic and olive oil", 0.35],
["ketchup", 0.15],
["mayonnaisee", 0.15],
["garlic basil mayo", 0.45],
["mustard", 0.25]
];
function getBreadInfo(el, currentOption) {
for (var i = 0; i < el.length; i++) {
//add event listener to all bread select menu options
el[i].addEventListener("change", function() {
selectedItem = event.target.value; //current selected item
getArrIndex(currentOption, selectedItem);
if (event.target.name === "bread-select") {
currentSandwich.breadType = chosenItem;
currentSandwich.breadPrice = chosenItemPrice;
} else if (event.target.name === "sauce-select") {
currentSandwich.sauce = chosenItem;
currentSandwich.saucePrice = chosenItemPrice;
} else if (event.target.name === "side-dishes-select") {
currentSandwich.sideDish = chosenItem;
currentSandwich.sideDishPrice = chosenItemPrice;
} else if (event.target.name === "drinks-select") {
currentSandwich.drinkSelect = chosenItem;
currentSandwich.drinkPrice = chosenItemPrice;
} else if (event.target.name === "toasted-select") {
currentSandwich.toasted = chosenItem;
}
});
}
}
function getArrIndex(arr, val) {
// val is the selected item
for (var i = 0; i < arr.length; i++) {
//iterate through the current choosen array
if (arr[i][0] === val) {
// when selected item is found in the array
chosenItem = arr[i][0]; // store the item in choosenItem value
chosenItemPrice = arr[i][1]; // store the item price in choosenItem value
}
}
}
getBreadInfo(selectBread, breadAndPrice);
getBreadInfo(sauceSelect, sauceAndPrice);
//get the index of the selected item from the bread and price array
function getIngredientsInfo() {
for (var i = 0; i < checkBoxes.length; i++) {
//loop check boxes
checkBoxes[i].addEventListener("change", function() {
//add event listener to check boxes
if (event.target.checked) {
//check if check boxes are checked
ingredients.push(event.target.name); //push the name of ingredient to ingredients array
ingredientsPrice.push(event.target.value); //get the price of the item checked from value attr and push it to ingredientsPrice array
} else if (event.target.checked === false) {
var index = ingredients.indexOf(event.target.name);
ingredients.splice(index, 1);
ingredientsPrice.splice(index, 1);
}
});
}
}
getIngredientsInfo();
<section class="order-section">
<h2 class="selection-header">Choose your...</h2>
<div class="select-container">
<select class="bread-select" name="bread-select">
<option selected disabled>Bread Type</option>
<option value="baguette">Baguette</option>
<option value="burger bun">Burger Bun</option>
<option value="ciabatta">Ciabatta</option>
<option value="focaccia">Focaccia</option>
<option value="ftira">Ftira</option>
<option value="olive bread">Olive Bread</option>
<option value="rye bread">Rye Bread</option>
<option value="sliced bread">Sliced Bread</option>
<option value="tortilla">Tortilla</option>
<option value="wheat bread">Wheat Bread</option>
<option value="whole grain bread">Whole Grain Bread</option>
</select>
<select class="sauces-select" name="sauce-select">
<option selected disabled>Sauces</option>
<option value="chili sauce">Chili Sauce</option>
<option value="garlic and olive oil">Garlic and Olive Oil</option>
<option value="ketchup">Ketchup</option>
<option value="mayonnaise">Mayonnaise</option>
<option value="garlic basil mayo">Garlic Basil Mayo</option>
<option value="mustard">Mustard</option>
</select>
<select class="side-dishes-select" name="side-dishes-select">
<option selected disabled>Side Dishes</option>
<option value="coleslaw">Coleslaw</option>
<option value="curly fries">Curly Fries</option>
<option value="mixed salad">Mixed Salad</option>
<option value="potato wedges">Potato Wedges</option>
<option value="potatoes salad">Potatoes Salad</option>
<option value="sliced Potatoes fries">Sliced Potatoes Fries</option>
<option value="sweet potatoes fries">Sweet Potatoes Fries</option>
</select>
<select class="drinks-select" name="drinks-select">
<option selected disabled>Drinks</option>
<option value="Still Water">Still Water</option>
<option value="Fizzy Water">Fizzy Water</option>
<option value="coca cola">Coca Cola</option>
<option value="sprite">Sprite</option>
<option value="fanta">Fanta</option>
<option value="kinnie">Kinnie</option>
<option value="cisk">Cisk</option>
</select>
<select class="toasted-select" name="toasted-select">
<option selected disabled>Toasted</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</section>
`I have a function which I am using to get data from select menus and I would like to save the data to an object by passing it as an argument. At the moment the only solution I found is to use if statements but it look bad. Any help to refactor this please?
if (event.target.name === "bread-select") {
currentSandwich.breadType = chosenItem;
currentSandwich.breadPrice = chosenItemPrice;
} else if (event.target.name === "sauce-select") {
currentSandwich.sauce = chosenItem;
currentSandwich.saucePrice = chosenItemPrice;
} else if (event.target.name === "side-dishes-select") {
currentSandwich.sideDish = chosenItem;
currentSandwich.sideDishPrice = chosenItemPrice;
} else if (event.target.name === "drinks-select") {
currentSandwich.drinkSelect = chosenItem;
currentSandwich.drinkPrice = chosenItemPrice;
} else if (event.target.name === "toasted-select") {
currentSandwich.toasted = chosenItem;
}

I'd suggest the switch is the way to go, it is both faster and better practice.
switch(event.target.name) {
case 'bread-select':
currentSandwich.breadType = chosenItem;
currentSandwich.breadPrice = chosenItemPrice;
break;
...
default:
}
Thanks

You can use a string to make a property assignment to and object using [] bracket notation. So if you are able to get a relevant property name, or part of a property name from your selects, that should work for you.
var selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].addEventListener('change', selectHandler);
}
var currentSandwich = {};
var prices = {
soda : .5,
tea : .5,
lemonade : 1,
water : 0,
corn : 2,
potatoes : 2.5,
carrots : 1.5
};
function selectHandler(evt){
var name = evt.target.name;
var selection = evt.target.value;
currentSandwich[name] = selection;
if(prices[selection]){
currentSandwich[name+"price"] = prices[selection];
}else{
currentSandwich[name+"price"] = 0;
}
console.log(currentSandwich);
}
<select name='drink'>
<option value=''>Please Choose One</option>
<option value='soda'>Soda</option>
<option value='tea'>Tea</option>
<option value='lemonade'>Lemonade</option>
<option value='water'>Water</option>
</select>
<select name='side'>
<option value=''>Please Choose One</option>
<option value='corn'>Corn</option>
<option value='potatoes'>Potatoes</option>
<option value='carrots'>Carrots</option>
</select>

This is a significantly different approach. It stores prices and some keys in the HTML markup, and uses a simple function to use these to update your sandwich.
I don't know if this sort of refactoring is what you were looking for, but it's one reasonable way to avoid such repetitive logic.
var sandwich = {};
var sandwichContainer = document.getElementById('sandwich-options');
sandwichContainer.addEventListener('change', function(ev) {
var select = event.target;
var choice = select.selectedOptions[0];
var choiceName = select.dataset.choiceName;
sandwich[choiceName] = choice.value
var priceName = select.dataset.choicePrice;
if (priceName) {
sandwich[priceName] = Number(choice.dataset.price);
}
console.log(sandwich)
});
<section class="order-section">
<h2 class="selection-header">Choose your...</h2>
<div id="sandwich-options">
<select class="bread-select" name="bread-select"
data-choice-name="breadType" data-choice-price="breadPrice">
<option selected disabled>Bread Type</option>
<option value="baguette" data-price="0.8">Baguette</option>
<option value="burger bun" data-price="0.8">Burger Bun</option>
<option value="ciabatta" data-price="0.9">Ciabatta</option>
<option value="focaccia" data-price="1.5">Focaccia</option>
<option value="ftira" data-price="0.8">Ftira</option>
<option value="olive bread" data-price="1.3">Olive Bread</option>
<option value="rye bread" data-price="1.3">Rye Bread</option>
<option value="sliced bread" data-price="0.9">Sliced Bread</option>
<option value="tortilla" data-price="1.6">Tortilla</option>
<option value="wheat bread" data-price="0.9">Wheat Bread</option>
<option value="whole grain bread" data-price="1.2">Whole Grain Bread</option>
</select>
<select class="sauces-select" name="sauce-select" data-
choice-name="sauce", data-choice-price="saucePrice">
<option selected disabled>Sauces</option>
<option value="chili sauce" data-price="0.25">Chili Sauce</option>
<option value="garlic and olive oil" data-price="0.35">Garlic and Olive Oil</option>
<option value="ketchup" data-price="0.15">Ketchup</option>
<option value="mayonnaise" data-price="0.15">Mayonnaise</option>
<option value="garlic basil mayo" data-price="0.45"
>Garlic Basil Mayo</option>
<option value="mustard" data-price="0.25">Mustard</option>
</select>
<select class="toasted-select" name="toasted-select" data-choice-name="toasted">
<option selected disabled>Toasted</option>
<option value="yes" data-price="0">Yes</option>
<option value="no" data-price="0">No</option>
</select>
</div>
</section>
An alternate approach would be to store all your prices in a object keyed by the select names, something like this:
var prices = {
'bread-select': {
'baguette': 0.8,
...
},
'sauces-select': {
'chili sauce': 0.25,
...
},
...
};
and then use select.name and choice.value from the above to key into this object. You would also need another object, or a way to enhance this one to store the final property names.

How to delete options in a dropdown list with javascript?

I have a dynamic dropdown list made of a parent-dropdown and a child-dropdown. I have a script that disables options in a child-dropdown when an option in the parent-dropdown is selected.
Instead of disabling it, I would like to completely remove the options in the child-dropdown so they won't be available.
"use strict";
window.onload = function() {
document.getElementById('category_select').addEventListener("change", function() {
function parent_() {
let i = document.getElementById('category_select');
let j = i.options[i.selectedIndex].value;
return j;
}
function child_() {
let k = document.getElementById('type_select');
for (let i = 0; i < k.options.length; ++i) {
if (k.options[i].value === parent_()) {
k.options[i].disabled = false;
} else if (k.options[i].value !== parent_()) {
k.options[i].disabled = true; //options get disabled and I would like to delete them ...
}
}
}
child_()
});
};
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="" disabled="">Please select</option>
<option value="1">Phones</option>
<option value="1">Tablets</option>
<option value="2" disabled="">Couch</option>
<option value="2" disabled="">Refrigerator</option>
<option value="2" disabled="">Vacuum</option>
</select>
Basically, when the option with the value of 1 is selected in category_select, all options in type_select with a value of 2 are disabled. I would like to delete them.
What is a simple and elegant way of doing this?
EDIT
Looks like the best solution for doing this can be found there http://jsfiddle.net/Lcjp2xav/1/ and has been provided by #Jagjeet Singh

You can do this by using k.options[i].style.display, if you want to completely remove then option then use k.options[i].remove()
function parent_() {
let i = document.getElementById('category_select');
let j = i.options[i.selectedIndex].value;
return j;
}
function child_() {
let k = document.getElementById('type_select');
for (let i = 0; i < k.options.length; ++i) {
if (k.options[i].value === parent_()) {
k.options[i].style.display = 'block';
k.options[i].disabled = false;
} else if (k.options[i].value !== parent_()) {
k.options[i].style.display = 'none';
k.options[i].disabled = true;
}
}
}
document.getElementById('category_select').addEventListener("change", function () {
child_();
});
child_();
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="">Please select</option>
<option value="1">Phones</option>
<option value="1">Tablets</option>
<option value="2">Couch</option>
<option value="2">Refrigerator</option>
<option value="2">Vacuum</option>
</select>

If you want to be able to re-display them later, you can remove them by setting their CSS to display: none, and display them again with removeProperty('display').
You can also feel free to move child_ and parent outside of the listener, to reduce unnecessary nesting:
function parent_() {
return document.getElementById('category_select').value;
}
function child_() {
let k = document.getElementById('type_select');
for (let i = 0; i < k.options.length; ++i) {
if (k.options[i].value === parent_()) {
k.options[i].style.removeProperty('display');
} else if (k.options[i].value !== parent_()) {
k.options[i].style.display = 'none';
}
}
k.selectedIndex = 0;
}
document.getElementById('category_select').addEventListener("change", child_);
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="" disabled="">Please select</option>
<option value="1">Phones</option>
<option value="1">Tablets</option>
<option value="2">Couch</option>
<option value="2">Refrigerator</option>
<option value="2">Vacuum</option>
</select>

using <optgroup> will be easier to solve the problem.
removing the child will not append back to the select box; so we are hiding the selected item from child select box at a time.
here is the pseudo code
const parent_category = document.getElementById('category_select');
const child_category = document.getElementById('type_select');
const optgroup = child_category.querySelectorAll('optgroup');
let selectedNode;
parent_category.addEventListener("change", function(e) {
let selectedValue = e.target.value;
child_category.selectedIndex = -1; // deselect previouly selected option
if (selectedNode) {
selectedNode.hidden = false;
}
Array.from(optgroup).forEach((node) => {
let nv = node.getAttribute('value');
if (nv !== selectedValue) {
selectedNode = node;
node.hidden = true;
// if you remove the child than no way to append back to select box
// while (node.firstChild) {
// node.removeChild(node.firstChild);
// }
// child_category.removeChild(node);
}
});
});
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="" disabled="">Please select</option>
<optgroup label="Electronics" value="1">
<option value="P">Phones</option>
<option value="T">Tablets</option>
</optgroup>
<optgroup label="Appliances" value="2">
<option value="C">Couch</option>
<option value="R">Refrigerator</option>
<option value="V">Vacuum</option>
</optgroup>
</select>

How do I compare values from two variables that got their values as result of mapping other variables in JavaScript?

I'm trying to:
get the user values from two select list and then
compare the user values with the first two items from an
object(which it has 5 items with properties), this object has been
created from mapping other 5 variables...and then if the user values
are equal to the first two items of some object's index
return the last 3 items from the object's index that has the first
two items equal to the user values.
So far, I know I already get the user values, I already map the values to get the arrays. I just need to correct how to compare the values and return the data to the last three select lists.
I appreciate any tips about:
how to make my code shorter.
how to avoid writing so much if statements
Here's my code:
index.html
<html>
<head>
<title>PicxHelper</title>
</head>
<body>
<!--RATIOS SECTION-->
<div id="ratiosWrapper" class="col-sm-4">
<p><strong><h2 id="rsP">Ratios</h2></strong></p>
<div id="ratios">
<p><strong>Ratios: </strong>
<select id="ratiosList">
<option value="1:1">1:1</option>
<option value="2:1">2:1</option>
<option value="3:1">3:1</option>
<option value="4:1">4:1</option>
<option value="5:1">5:1</option>
<option value="6:1">6:1</option>
<option value="7:1">7:1</option>
<option value="8:1">8:1</option>
</select>
</p>
<p><strong>Camera Aperture: </strong>
<select class="" id="lensA">
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<p><strong>Main Light: </strong>
<select class="" id="mainL">
<option value="f/0.32">f/0.32</option>
<option value="f/0.35">f/0.35</option>
<option value="f/0.4">f/0.4</option>
<option value="f/0.45">f/0.45</option>
<option value="f/0.5">f/0.5</option>
<option value="f/0.56">f/0.56</option>
<option value="f/0.63">f/0.63</option>
<option value="f/0.71">f/0.71</option>
<option value="f/0.79">f/0.79</option>
<option selected value="f/0.89">f/0.89</option>
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<p><strong>Fill Light: </strong>
<select class="" id="fillL">
<option value="f/0.32">f/0.32</option>
<option value="f/0.35">f/0.35</option>
<option value="f/0.4">f/0.4</option>
<option value="f/0.45">f/0.45</option>
<option value="f/0.5">f/0.5</option>
<option value="f/0.56">f/0.56</option>
<option value="f/0.63">f/0.63</option>
<option value="f/0.71">f/0.71</option>
<option value="f/0.79">f/0.79</option>
<option selected value="f/0.89">f/0.89</option>
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<p><strong>Hair Light: </strong>
<select class="" id="rimL">
<option value="f/0.32">f/0.32</option>
<option value="f/0.35">f/0.35</option>
<option value="f/0.4">f/0.4</option>
<option value="f/0.45">f/0.45</option>
<option value="f/0.5">f/0.5</option>
<option value="f/0.56">f/0.56</option>
<option value="f/0.63">f/0.63</option>
<option value="f/0.71">f/0.71</option>
<option value="f/0.79">f/0.79</option>
<option value="f/0.89">f/0.89</option>
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option selected value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<button class="btn-primary btn-md" onclick="myFunction();" style="border-radius: 20px;">Get Settings</button>
</div>
</div>
</body>
<script type="text/javascript" src="ratiosCalc.js"> </script>
</html>
ratiosCalc.js
var rAaA = function(ratio, apers){
this.ratio = ratio;
this.apers = apers;
}
var userRaaa = function(ratio, lensA, mainA, fillA, rimA){
this.ratio = ratio;
this.lensA = lensA;
this.mainA = mainA;
this.fillA = fillA;
this.rimA = rimA;
}
var ratiosArray = ["1:1", "2:1", "3:1", "4:1", "5:1", "6:1", "7:1", "8:1"];
var aperturesSettings = [
{
lensArray : ["f/1", "f/1.1", "f/1.2", "f/1.4", "f/1.6", "f/1.8", "f/2",
"f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4", "f/4.5", "f/5",
"f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11", "f/13", "f/14",
"f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32", "f/36", "f/40",
"f/44", "f/52", "f/56", "f/64"]
//End of "Lens Apertures Available on a Variable/Array".
},
{
mainLightArray : ["f/0.32", "f/0.35", "f/0.4", "f/0.45", "f/0.5", "f/0.56",
"f/0.63", "f/0.71", "f/0.79", "f/0.89", "f/1", "f/1.1", "f/1.2", "f/1.4",
"f/1.6", "f/1.8", "f/2", "f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4",
"f/4.5", "f/5", "f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11",
"f/13", "f/14", "f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32",
"f/36", "f/40", "f/44", "f/52", "f/56", "f/64"]
},
{
fillLightArray : ["f/0.32", "f/0.35", "f/0.4", "f/0.45", "f/0.5", "f/0.56",
"f/0.63", "f/0.71", "f/0.79", "f/0.89", "f/1", "f/1.1", "f/1.2", "f/1.4",
"f/1.6", "f/1.8", "f/2", "f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4",
"f/4.5", "f/5", "f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11",
"f/13", "f/14", "f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32",
"f/36", "f/40", "f/44", "f/52", "f/56", "f/64"]
},
{
rimLightArray : ["f/0.32", "f/0.35", "f/0.4", "f/0.45", "f/0.5", "f/0.56",
"f/0.63", "f/0.71", "f/0.79", "f/0.89", "f/1", "f/1.1", "f/1.2", "f/1.4",
"f/1.6", "f/1.8", "f/2", "f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4",
"f/4.5", "f/5", "f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11",
"f/13", "f/14", "f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32",
"f/36", "f/40", "f/44", "f/52", "f/56", "f/64", "f/72", "f/80", "f/88"]
}
];
var userSettings = [
// Mapping Ratio 1:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[0], value);
}),
// Mapping Ratio 2:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[1], value);
}),
// Mapping Ratio 3:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[2], value);
}),
// Mapping Ratio 4:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[3], value);
}),
// Mapping Ratio 5:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[4], value);
}),
// Mapping Ratio 6:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[5], value);
}),
// Mapping Ratio 7:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[6], value);
}),
// Mapping Ratio 8:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[7], value);
})
];
var userCompleteSettings = [
// MApping Ratio 1:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[0], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-28], aperturesSettings[3].rimLightArray[arr.length+index-24]);
}),
// Mapping Ratio 2:1 "One stop of difference"
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[1], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-31], aperturesSettings[3].rimLightArray[arr.length+index-24]);
}),
// Mapping Ratio 3:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[2], value);
}),
// Mapping Ratio 4:1 "Two stop of difference"
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[3], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-34], aperturesSettings[3].rimLightArray[arr.length+index-24]);
}),
// Mapping Ratio 5:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[4], value);
}),
// Mapping Ratio 6:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[5], value);
}),
// Mapping Ratio 7:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[6], value);
}),
// Mapping Ratio 8:1 "Three stop of difference"
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[7], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-37], aperturesSettings[3].rimLightArray[arr.length+index-24]);
})
];
//Main Function Triggered when user choose a Seeting
function myFunction(){
return myFunct();
} //End of Main Function.
function myFunct(){
var userRatio = document.getElementById("ratiosList").value;
var userLensAper = document.getElementById("lensA").value; //End of Getting UserSettings
var userRL = [userRatio, userLensAper];
if(userRL == [userSettings[0][0].ratio, userSettings[0][0].apers]){
return document.getElementById("mainL").selectedIndex = 10,
document.getElementById("fillL").selectedIndex = 10,
document.getElementById("rimL").selectedIndex = 12;
}else if (userRL == [userSettings[0][1].ratio, userSettings[0][1].apers]) {
return document.getElementById("mainL").selectedIndex = 11,
document.getElementById("fillL").selectedIndex = 11,
document.getElementById("rimL").selectedIndex = 13;
}else if (userRL == [userSettings[0][2].ratio, userSettings[0][2].apers]) {
return document.getElementById("mainL").selectedIndex = 12,
document.getElementById("fillL").selectedIndex = 12,
document.getElementById("rimL").selectedIndex = 14;
}else if (userRL == [userSettings[0][3].ratio, userSettings[0][3].apers]) {
return document.getElementById("mainL").selectedIndex = 13,
document.getElementById("fillL").selectedIndex = 13,
document.getElementById("rimL").selectedIndex = 15;
}
}

You can always replace your last set of if statements with the following for loop as you perform similar activity in all the if blocks-
var i = 0;
for( i = 0,; i < 4; i++ ){
if(userRL[0] == userSettings[i][i].ratio && userRL[1] == userSettings[i][i].apers]){
return document.getElementById("mainL").selectedIndex = i+10,
document.getElementById("fillL").selectedIndex = i+10,
document.getElementById("rimL").selectedIndex = i+12;
}
}
You need to be comparing the 2 values separately using an && operator.

and this solved my todays challenge:
for( i = 0; i < 7; i++ ){
for( a = 0; a < 37; a++ ){
if(userRL[0] == userSettings[0][2].ratio && userRL[1] == userSettings[0][a].apers){
return document.getElementById("mainL").selectedIndex = a+9,
document.getElementById("fillL").selectedIndex = a+9,
document.getElementById("rimL").selectedIndex = a+12;
}else if (userRL[0] == userSettings[1][2].ratio && userRL[1] == userSettings[1][a].apers) {
return document.getElementById("mainL").selectedIndex = a+9,
document.getElementById("fillL").selectedIndex = a+6,
document.getElementById("rimL").selectedIndex = a+12;
}else if (userRL[0] == userSettings[3][2].ratio && userRL[1] == userSettings[3][a].apers) {
return document.getElementById("mainL").selectedIndex = a+9,
document.getElementById("fillL").selectedIndex = a+3,
document.getElementById("rimL").selectedIndex = a+12;
}else if (userRL[0] == userSettings[7][2].ratio && userRL[1] == userSettings[7][a].apers) {
return document.getElementById("mainL").selectedIndex = a+9,
document.getElementById("fillL").selectedIndex = a+0,
document.getElementById("rimL").selectedIndex = a+12;
}
}
}
thanks to #Rajeev Ranjan for the Orientation.

How to dynamically generate a dropdown menu [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
In my php, I have created two dropdown or selection lists. My drop down list below:
<select name="food">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>
<select name="type">
<option value="">--</option>
<option value="Apple">Apple</option>
<option value="Lettuce">Lettuce</option>
<option value="Orange">Orange</option>
<option value="Tomato">Tomato</option>
<option value="Carrots">Carrots</option>
<option value="Mango">Mango</option>
</select>
m one page to the next.

It's possible to do this using jQuery, but it will quickly become unmanageable in a large-scale app or website.
If you go this route, I would avoid using two different select boxes, as this will force you to choose two different names for the form POST, unless you use more jQuery hackery to remedy this problem.
My suggestion is to look at a lightweight JS framework. Knockoutjs has what you need.
Look at this JSFiddle.
var fruitOpts = ["Apple", "Orange", "Mango"];
var vegOpts = ["Lettuce", "Tomato", "Carrots"];
$("#food").change(function () {
var val = $(this).val();
if (val === "") {
return;
}
$("#type").find('option').not(':first').remove().end();
$.each(val === "Fruits" ? fruitOpts : vegOpts, function (i, v) {
$("#type").append("<option value=\"" + v + "\">" + v + "</option>");
});
$.each(val === "Fruits" ? vegOpts : fruitOpts, function (i, v) {
$("#type").append("<option value=\"" + v + "\">" + v + "</option>");
});
});

It's version for two different php pages:
1.php
<script src="1.js"></script>
<a id='link' href='2.php'>go to another page</a>
<select id="food" name="food" onchange="selectFoodType()">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
<option value="Berries">Berries</option>
</select>
1.js
function selectFoodType()
{
var link = $('#link');
var type = $('select#food option:selected').val();
link.attr('href', link.attr('href') + '?type=' + type);
}
2.php
<script src="2.js"></script>
<select id='type' name="type" data-type='<?=$_GET['type']?>'>
<option value="">--</option>
<option data-type='Fruits' value="Apple">Apple</option>
<option data-type='Vegetables' value="Tomato">Tomato</option>
<option data-type='Vegetables' value="Carrots">Carrots</option>
<option data-type='Berries' value="Strawberry">Strawberry</option>
</select>
2.js
$(function() {
var type = $('select#type').data('type');
var itemsId = document.getElementById("type");
var items = itemsId.getElementsByTagName("option");
var selected_type = [], other_types = [];
selected_type[0] = items[0];
for (var i = 1; i < items.length; i++){
if ($(items[i]).data('type') === type) {
selected_type.push(items[i]);
continue;
}
other_types.push(items[i]);
}
selected_type = selected_type.sort(sortByName);
other_types = other_types.sort(sortByName);
$.merge(selected_type, other_types);
var list = '';
for (i=0; i<selected_type.length; i++) {
list += selected_type[i].outerHTML;
}
$(items).remove();
$(itemsId).append(list);
});
function sortByName(a, b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
return 0;
}

You should assign all Fruits and Vegetables contents in JavaScript object and display related contents of food value in another drop down, see below demo
Food:
<select name="food" id="food">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>
Content
<select name="contents" id="contents">
<option value="">...</option>
</select>
JS code
var data = {
'Fruits':['Apple', 'Lettuce', 'Orange', 'Mango'],
'Vegetables': ['Tomato', 'Carrots']
};
document.getElementById("food").onchange = function(Event){
var contents = document.getElementById("contents");
contents.innerHTML = "";
for(var i in data[this.value]){
var option = document.createElement("option");
option.setAttribute('value',data[this.value][i]);
option.text = data[this.value][i];
contents.appendChild(option);
}
var expect_data = Event.target.value == "Fruits" ? "Vegetables" : "Fruits";
for(var i in data[expect_data]){
var option = document.createElement("option");
option.setAttribute('value',data[expect_data][i]);
option.text = data[expect_data][i];
contents.appendChild(option);
}
}
FIDDLE DEMO

you need to use JQuery for this purpose.
See My Solution: http://jsfiddle.net/inventorx/YU4vJ/
Code Here:
HTML
<select name="food" >
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>
<select name='type' >
<option>-- Select Food Type --</option>
</select>
<select id='Fruits' style='display:none' >
<option value="">--</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Mango">Mango</option>
</select>
<select id='Vegetables' style='display:none' >
<option value="">--</option>
<option value="Lettuce">Lettuce</option>
<option value="Tomato">Tomato</option>
<option value="Carrots">Carrots</option>
</select>
JQUERY
$(document).ready(function(){
$("select[name='food']").on("change", function(){
var value = $(this).val();
$("select[name='type']").html($("#" + value).html());
});
});

Another option.
The list splits into two arrays: food, corresponding to the selected type; and does not correspond to the selected type. Each of these arrays, in turn, is sorted by name:
JSFIDDLE
HTML:
<select id="food" name="food" onchange="selectFoodType()">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
<option value="Berries">Berries</option>
</select>
<select id='type' name="type">
<option value="">--</option>
<option data-type='Fruits' value="Apple">Apple</option>
<option data-type='Vegetables' value="Lettuce">Lettuce</option>
<option data-type='Vegetables' value="Tomato">Tomato</option>
<option data-type='Berries' value="Strawberry">Strawberry</option>
</select>
JQuery:
function selectFoodType()
{
var type = $('select#food option:selected').val();
var itemsId = document.getElementById("type");
var items = itemsId.getElementsByTagName("option");
var selected_type = [], other_types = [];
selected_type[0] = items[0];
for (var i = 1; i < items.length; i++){
if ($(items[i]).data('type') === type) {
selected_type.push(items[i]);
continue;
}
other_types.push(items[i]);
}
selected_type = selected_type.sort(sortByName);
other_types = other_types.sort(sortByName);
$.merge(selected_type, other_types);
var list = '';
for (i=0; i<selected_type.length; i++) {
list += selected_type[i].outerHTML;
}
$(items).remove();
$(itemsId).append(list);
}
function sortByName(a, b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
return 0;
}

calling dropdown dynamically for selecting date in html

<select value="dt" name="previousYear">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected="selected" value="2011">2011</option>
<option value="2012">2012</option>
<option value="2012">2013</option>
<option value="2012">2014</option>
</select>
<select value="dt" name="currentYear">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected="selected" value="2011">2011</option>
<option value="2012">2012</option>
<option value="2012">2013</option>
<option value="2012">2014</option>
</select>
<select value="dt" name="nextYear">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected="selected" value="2011">2011</option>
<option value="2012">2012</option>
<option value="2012">2013</option>
<option value="2012">2014</option>
</select>
I have 3 drop down list like this previous year ,current year & next year How can i select the current year as a current year like if the current year is 2012 then it automatically have to select the 2012 when page loads can any one tell me the Javascript code for selecting dynamikcally

Your markup seems incorrect . I guess you are looking for something like this:
<script type="text/javascript">
function setYear()
{
var d = new Date();
var x = document.getElementById("currentYear");//for select box id="currentYear"
x.value=d.getFullYear();
}
</script>
Call it like :
<body onload="setYear()">
<!-- your markup -->
</body>
Call the above function on page load to set current year for the select box.
I would suggest you to learn Javascript for better understanding as its a basic example.Hope this helps.

You should use something as
var d = new Date();
var cur = document.getElementById('currentYear');
var prev = document.getElementById('previousYear');
var next = document.getElementById('nextYear');
var optionC, optionP, optionN;
for (var i = d.getFullYear() - 5; i <= d.getFullYear() + 5; i++) {
optionC = document.createElement("option");
optionC.setAttribute("value", i);
optionC.innerHTML = i;
cur.appendChild(optionC);
}
for (var i = d.getFullYear() - 10; i < d.getFullYear(); i++) {
optionP = document.createElement("option");
optionP.setAttribute("value", i);
optionP.innerHTML = i;
prev.appendChild(optionP);
}
for (var i = d.getFullYear() + 1; i <= d.getFullYear() + 10; i++) {
optionN = document.createElement("option");
optionN.setAttribute("value", i);
optionN.innerHTML = i;
next.appendChild(optionN);
}
cur.value = d.getFullYear();
prev.value = d.getFullYear() - 1;
next.value = d.getFullYear() + 1;​
Just add javascript function like
function setYear(obj)
{
var prev = document.getElementById('previousYear');
var next = document.getElementById('nextYear');
prev.value = Number(obj.value) - 1;
next.value = Number(obj.value) + 1;
}
Updated demo