We Keep Coding

JavaScript Linking Select Options to Snippets of Code

I'm brand new to JavaScript, so please be patient. I've searched online the last few days looking for a solution, but I'm not finding one. A big reason for that is I don't really know what I'm supposed to be looking for.
With that being said, help with code would be great. If you don't care to write any code in response, but would be willing to point me in the right direction as to what would be a solution for my problem, that would be fantastic as well.
What I'm trying to do: User chooses an option from the second dropdown box which then displays the 'SHOW ME WHERE TO GO' button. When the button is clicked, a div is displayed over the top with a video embedded in it to provide them directions.
My problem: I feel like I need an array or object of some kind to link select options to snippets of embed code for dropping into the directions_container div. I don't know how to link options selected by the user to the appropriate code snippets. Clicking the SHOW ME WHERE TO GO button should trigger the appropriate snippet of code to be inserted into the div tag.
Below is my current project code.
HTML
<div id="directions_container">
<p id="embed"></p>
<br>
<br>
<span href="" onclick="close_div()">Choose New Directions</span>
</div>
<div id="SelectionBoxes">
<select id="TransactionType" onchange="check();">
<option selected="selected" value="">I am a...</option>
<option value="DH">Drop and Hook</option>
<option value="Live">Live Unload</option>
<option value="LTL">LTL</option>
<option value="FedEx">FedEx Ground/Express</option>
<option value="Visitor">Visitor</option>
</select>
<br>
<br>
<select id="DHOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Describe your transaction...</option>
<option value="LILO">Load In - Load Out</option>
<option value="LIEO">Load In - Empty Out</option>
<option value="EILO">Empty In - Load Out</option>
<option value="EIEO">Empty In - Empty Out</option>
<option value="BILO">Bobtail In - Load Out</option>
<option value="PUP">Pup Trailers/Containers</option>
<option value="CONT">Containers</option>
</select>
<select id="LUOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Where will you be unloaded?</option>
<option value="WH1">Warehouse 1 / 100 Level Docks</option>
<option value="WH2">Warehouse 2 / 200 Level Docks</option>
<option value="WH3">Warehouse 3 / 300 Level Docks</option>
<option value="WH4">Warehouse 4 / 400 Level Docks</option>
</select>
<select id="LTLOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Where do I go?</option>
<option value="327">Dock Door 327</option>
</select>
<select id="FEDEXOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Describe your transaction...</option>
<option value="RETURNS">Returns Load In - Load Out</option>
<option value="EMPTY">Empty In - Load Out</option>
</select>
<select id="VISITOROps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">What is the purpose of your visit?</option>
<option value="MAINT">Delivery for Maintenance</option>
<option value="VEND">Canteen/Vending</option>
<option value="GARBAGE">Garbage Pickup</option>
<option value="OFFICE">Visit Transportation Office</option>
</select>
<br>
<br>
<button id="submit" type="button" style=display:none; onclick="provideDirections();">SHOW ME WHERE TO GO</button>
</div>
CSS
#directions_container {
z-index: 1;
background-color: #FFFFFF;
display: none;
position: absolute;
width: 500px;
height: 300px;
}
JavaScript
function check() {
var dropdown = document.getElementById("TransactionType");
var current_value = dropdown.options[dropdown.selectedIndex].value;
if (current_value == "DH") {
document.getElementById("DHOps").style.display = "block";
document.getElementById("LUOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
document.getElementById("submit").style.display = "none";
}
if (current_value == "Live") {
document.getElementById("LUOps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
document.getElementById("submit").style.display = "none";
}
if (current_value == "LTL") {
document.getElementById("LTLOps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LUOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
document.getElementById("submit").style.display = "none";
}
if (current_value == "FedEx") {
document.getElementById("FEDEXOps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LUOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
document.getElementById("submit").style.display = "none";
}
if (current_value == "Visitor") {
document.getElementById("VISITOROps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LUOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
document.getElementById("submit").style.display = "none";
}
}
function showbtn() {
var childboxes = [
document.getElementById("DHOps"),
document.getElementById("LUOps"),
document.getElementById("LTLOps"),
document.getElementById("FEDEXOps"),
document.getElementById("VISITOROps"),
];
childboxes.forEach((childbox) => {
if (childbox.onchange) {
document.getElementById("submit").style.display = "block";
}
});
}
function provideDirections() {
var embed_directions = {}
document.getElementById("directions_container").style.display = "block";
}
function close_div () {
document.getElementById("directions_container").style.display = "none";
}

I think it would be a good idea to have the data about what to select in an array/object.
I guess there are a lot of new stuff here, but notice especially that the data item is inserted into the option element as itemdata. This is a trick for passing around data.
var data = [{
id: "1",
title: "Option 1",
suboptions: [{
id: "1a",
title: "Option 1a"
}, {
id: "1b",
title: "Option 1b"
}]
},
{
id: "2",
title: "Option 2",
suboptions: [{
id: "2a",
title: "Option 2a"
}, {
id: "2b",
title: "Option 2b"
}]
}
];
document.addEventListener('DOMContentLoaded', e => {
document.forms.selection.addEventListener('submit', e => {
e.preventDefault();
console.log(e.target.first.value,e.target.second.value, "was selected")
});
document.forms.selection.second.addEventListener('change', e => {
document.forms.selection.button.disabled = false;
});
document.forms.selection.first.addEventListener('change', e => {
let optVal = e.target.value;
let optElm = e.target.querySelector(`option[value = '${optVal}']`);
if (optElm){
update(optElm.itemdata.suboptions, document.forms.selection.second);
} else {
document.forms.selection.second.innderHTML = '';
document.forms.selection.second.disabled = true;
document.forms.selection.button.disabled = true;
}
});
update(data, document.forms.selection.first);
});
const update = (array, select) => {
select.innerHTML = '';
let opt = document.createElement('OPTION');
select.appendChild(opt);
array.forEach(item => {
let opt = document.createElement('OPTION');
opt.value = item.id;
opt.innerText = item.title;
opt.itemdata = item;
select.appendChild(opt);
});
select.disabled = false;
};
<form name="selection">
<select name="first" required disabled>
</select>
<select name="second" required disabled>
</select>
<button name="button" disabled>Go!</button>
</form>

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.

html select element that its options depends on another select

I have two select element and I want to show some options in second select based on what user choose at first select.
consider first select have two options : a , b ...
if user choose 'a' from first select :
the second select optiones should be -> c , d ...
and if user choose 'b' from first select :
the second select optiones should be : e , f ...
I have done some coding but the problem is at the start when user doesnt choose any option from first select the second select is always empty(it should show c , d)
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>

If you can save the option values in a lookup object (or JSON):
function setOptions(select, values) {
for (var i = select.length = values.length; i--; )
select[i].innerText = values[i]
}
function value(select) { return select.value || select[0].value } // 1st item by default
var data = { 1: { 1.1: [1.11, 1.12], 1.2: [1.21, 1.22] },
2: { 2.1: [2.11, 2.12], 2.2: [2.21, 2.22], 2.3: [2.31, 2.32, 2.33] } }
s2.onchange = function() { setOptions(s3, data[value(s1)][value(s2)]) }
s1.onchange = function() { setOptions(s2, Object.keys(data[value(s1)])); s2.onchange() }
setOptions(s1, Object.keys(data)); s1.onchange(); // fill the options
<select id=s1 required size=3></select>
<select id=s2 required size=3></select>
<select id=s3 required size=3></select>

This code is based on JavaScript (No need for jQuery)
change Id name and value (x=="desire_value") according to your code
function myFunction() {
var x = document.getElementById("select1").value;
if (x == "3") document.getElementById("select2").style.display = "block";
else document.getElementById("select2").style.display = "none";
}
<select id="select1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

You have to write the functionality outside of onchange(). Try the following:
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
let element = document.getElementById("s1");
let selOption = element.options[element.selectedIndex].value;
if(selOption == 'a'){
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>

Why don't you just put that hard coded...
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="c">c</option>
<option value="d">d</option>
</select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>

One approach to contemplate is populating the dependant dropdowns with all values and use a data attribute for the parent-child relationship. Javascript then clones and removes the options for later insertion.
The functional javascript is now very lean and the dependency relationships are maintained in the DOM.
var s2Clone;
// Doesn't work in older IEs
//CLone the Dependant drop down and hide
document.addEventListener('DOMContentLoaded', function(){
s2Clone = document.getElementById("s2").cloneNode(true);
document.getElementById("s2").innerHTML = "";
}, false);
document.getElementById("s1").onchange = function() {
var selected = this.value;
//Get the nodes with a parent attribute of the selected data
var optionsToInsert = s2Clone.querySelectorAll("[data-parent='" + selected +"']");
//clear existing
var s2 = document.getElementById("s2");
s2.innerHTML = "";
//Add The new options.
for(i = 0; i < optionsToInsert.length; i++)
{
s2.appendChild(optionsToInsert[i]);
}
}
<select id="s1" required>
<option value="">Please select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="a1" data-parent="a">a - 1</option>
<option value="a2" data-parent="a">a - 2</option>
<option value="a3" data-parent="a">a - 3</option>
<option value="b1" data-parent="b">b - 1</option>
<option value="b2" data-parent="b">b - 2</option>
<option value="b3" data-parent="b">b - 3</option>
</select>

How to redirect drop down menu when option is selected?

I want to be able to jump to the web page when the option is selected from the third drop down menu.
Javascript:
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
}
HTML:
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
</form>
example
Any idea how to resolve this?

Adding:
citySel.onchange = function(){
window.location.href = "http://google.it";
}
At the bottom of window.onload = function () { should do the job.
You probabily want to do something like:
citySel.onchange = function(){
switch(citySel.value){
case "Salinas":
window.location.href = "http://salinas.com";
break;
case "Gonzales":
if(stateSel.value == "Something"){
window.location.href = "http://gonzales.com";
}else if(stateSel.value == "Else"){
window.location.href = "http://gonzales.com";
}
break;
}

Add onchange handler to your city select.
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
citySel.onchange = function () {
if(stateSel.options.length > 0 && countySel.options.length) {
alert('County: '+countySel.value + ' - State: ' +stateSel.value + ' - City: ' +citySel.value);
location.href = '/'; // your link
}
}
}
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
</form>

The following line can be used in an onChange event for the select box:
window.location.replace("http://YOUR-URL-HERE.com");
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
citySel.onchange = function () {
//redirect page
window.location.replace("http://stackoverflow.com");
}
}
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
</form>

javascript form calculator - set values from drop down

I have a form that has a function to perform calculations and I cannot get it to work properly although its not throwing any errors in the console. When I check the checkbox, it doesn't stay checked. When I select the province from the drop down menu basically it should set the appropriate government fee, our fee and the tax value.
//my array
var price_govStatus = new Array(14)
price_govStatus[0] = 17.50 //Alberta
price_govStatus[1] = 26.68 //British Columbia
price_govStatus[2] = 35 //Manitoba
price_govStatus[3] = 20 //New Brunswick
price_govStatus[4] = 10 //Newfoundland
price_govStatus[5] = 10 //Northwest Territories
price_govStatus[6] = 37.40 //Nova Scotia
price_govStatus[7] = 10 //Nunavut
price_govStatus[8] = 26.00 //Ontario
price_govStatus[9] = 30 //Prince Edward Island
price_govStatus[10] = 34.34 //Quebec
price_govStatus[11] = 20 //Saskatchewan
price_govStatus[12] = 15 //Yukon
price_govStatus[13] = 10 //Canada
function checkJurisdictions() {
if ((theForm.Corporate_Profile_Report.checked == true) && (theForm.corpsearchprov.selectedIndex >= 0) )
{
dis_govfee_corporate_profile_report = price_govCorpProfile[theForm.corpsearchprov.selectedIndex];
theForm.dis_govfee_corporate_profile_report.value = formatCurrency(price_govCorpProfile[theForm.corpsearchprov.selectedIndex]);
}
else
{
dis_govfee_corporate_profile_report = 0;
theForm.dis_govfee_corporate_profile_report.value = formatCurrency('0.00');
}
if ((theForm.Certificate_Status.checked == true) && (theForm.statusprov.selectedIndex != 6))
{
dis_govfee_certstatus = price_govStatus[theForm.statusprov.selectedIndex];
theForm.dis_govfee_certstatus.value = formatCurrency(price_govStatus[theForm.statusprov.selectedIndex]);
dis_ourfee_certstatus = 30;
theForm.dis_ourfee_certstatus.value = formatCurrency('30.00');
dis_tax_certstatus = 3.90;
}
else if ((theForm.Certificate_Status.checked == true) && (theForm.statusprov.selectedIndex = 6))
{
dis_govfee_certstatus = 37.40;
theForm.dis_govfee_certstatus.value = formatCurrency('37.40');
dis_ourfee_certstatus = 35;
theForm.dis_ourfee_certstatus.value = formatCurrency('35.00');
dis_tax_certstatus = 4.55;
}
else if (theForm.Certificate_Status.checked == false)
{
dis_govfee_certstatus = 0;
theForm.dis_govfee_certstatus.value = formatCurrency('0.00');
dis_ourfee_certstatus = 0;
theForm.dis_ourfee_certstatus.value = formatCurrency('0.00');
dis_tax_certstatus = 0;
}
}
My HTML
<select onChange="Form_Calculator();" id="statusprov" name="statusprov">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland">Newfoundland</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
<option value="Canada">Canada</option>
</select>