We Keep Coding

Two select fields dependent on each other

what I'm trying to do is to create two select fields and after selecting some option in the first one, some of options in the second should be hidden.
I'm almost there, except the fact, that my script can't find certain option out of the first select field, but when I put such option in the first it works, but only with the first one, so it's useless. I need it to hide options in the second select field according to option chosen in the first one.
What makes it all more difficult is the fact that I can't add any classes or ids or anything actually here.
I think I've made some mistake that consists of the way I tell the script which element should it edit, but I have no idea how to write it another way.
HTML
<select name="NameOne">
<option value="First">Lorem Ipsum1</option>
<option value="Second">Lorem Ipsum2</option>
<option value="Third">Lorem Ipsum3</option>
<option value="CD">Dolor2</option>
</select>
<select name="NameTwo">
<option value="AB">Dolor1</option>
<option value="CD">Dolor2</option>
<option value="EF">Dolor3</option>
</select>
JS
$("select").change(function(){
if($(this).val() == "Second") {
$('option[value="CD"]', this).addClass('hidden');
} else {
$('option[value="CD"]', this).removeClass('hidden');
}
});
CSS
.hidden {
display: none
}
Please, help.

It is not working because of this code here:
$('option[value="CD"]', this)...
In simple words, this checks for the option on select which is currently clicked. Since you clicked the first select, this becomes the first select and it tries to find option with values CD on it which is not present. So what you do?? Simple, get the second select, find option with values CD in it and change the class :)
Try this
// you can change this to select first select only since selecting all the select doesnot make sense.
$("select").change(function(){
//$("select[name='NameOne']").change(function(){ <--- better
var secondSelect = $("select[name='NameTwo']"); //get second select
if($(this).val() == "Second") {
secondSelect.find('option[value="CD"]').addClass('hidden'); //find option with CD and add Class
} else {
secondSelect.find('option[value="CD"]').removeClass('hidden');
}
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="NameOne">
<option value="First">Lorem Ipsum1</option>
<option value="Second">Lorem Ipsum2</option>
<option value="Third">Lorem Ipsum3</option>
<option value="CD">Dolor2</option>
</select>
<select name="NameTwo">
<option value="AB">Dolor1</option>
<option value="CD">Dolor2</option>
<option value="EF">Dolor3</option>
</select>
$("select").change(function(){
var secondSelect = $(select["name='NameTwo']");
if($(this).val() == "Second") {
secondSelect.find('option[value="CD"]').addClass('hidden');
} else {
secondSelect.find('option[value="CD"]').removeClass('hidden');
}
});

You should query on a specific select and then hide the option in the other select, without this which would only do those options in the select that changed.
$("select[name='NameOne']").change(function() {
if ($(this).val() == "Second") {
$("select[name='NameTwo'] option[value='CD']").addClass('hidden');
} else {
$("select[name='NameTwo'] option[value='CD']").removeClass('hidden');
}
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="NameOne">
<option value="First">Lorem Ipsum1</option>
<option value="Second">Lorem Ipsum2</option>
<option value="Third">Lorem Ipsum3</option>
<option value="CD">Dolor2</option>
</select>
<select name="NameTwo">
<option value="AB">Dolor1</option>
<option value="CD">Dolor2</option>
<option value="EF">Dolor3</option>
</select>

Changing an HTML form input with JavaScript

I'm trying to make an editable character sheet for the game Pathfinder. I have a <select> for choosing a race and a value set to each race. My value is a string though. What I need to do is when a race is selected I need an input form to be updated.
The Javascript should assign a variable for the stat going to be modified. The user would then type in the base stat number and when finished the javascript would then either add or subtract whatever the modifier is from the value entered by the user.
For example: A dwarf gets a +2 to their constitution score. So when a user selects dwarf from the drop down menu I need my script to recognize that and declare a variable equal to 2. The user would then type in the base stat, let's say 13. Once they are done entering in that number the code would automatically update the input field to 15.
I've figured out how to do this for things like <p> but I can't get it for text inputs. I realize the easy thing would be to set the option value to whatever the bonus number is but races effect 3 stats, two positively and one negatively. So I can only understand how to do this with in/else statements. I'm very new to this.
Here is my code. Any help is appreciated greatly.
<script>
function createModifier () {
var race = document.getElementById("race");
if (race = "cat") {
var strMod = 3;
}
else {
var strMod = 1;
}
document.getElementById("strElm").innerHTML = 10 + strMod;
}
</script>
</head>
<body>
<form>
<div id="raceSelector" class="attribute">
<p><strong>Race</strong></p>
<select name="race" id="race">
<option value="aas">Aasimar</option>
<option value="cat">Catfolk</option>
<option value="cha">Changeling</option>
<option value="dha">Dhampir</option>
<option value="dro">Drow</option>
<option value="due">Duergar</option>
<option value="dwa">Dwarf</option>
<option value="elf">Elf</option>
<option value="fet">Fetchling</option>
<option value="gil">Gillman</option>
<option value="gno">Gnome</option>
<option value="gob">Goblin</option>
<option value="gri">Grippli</option>
<option value="hale">Half-Elf</option>
<option value="half">Halfing</option>
<option value="halo">Half-Orc</option>
<option value="hob">Hobgoblin</option>
<option value="hum">Human</option>
<option value="ifr">Ifrit</option>
<option value="kit">Kitsune</option>
<option value="kob">Kobold</option>
<option value="mer">Merfolk</option>
<option value="nag">Nagaji</option>
<option value="orc">Orc</option>
<option value="ore">Oread</option>
<option value="rat">Ratfolk</option>
<option value="sam">Samaran</option>
<option value="str">Strix</option>
<option value="sul">Suli</option>
<option value="svi">Svirfneblin</option>
<option value="syl">Sylph</option>
<option value="ten">Tengu</option>
<option value="tie">Tiefling</option>
<option value="und">Undine</option>
<option value="van">Vanara</option>
<option value="vis">Vishkanya</option>
<option value="way">Wayang</option>
</select>
</div>
<div class="attribute">
<input type="text" onchange="createModifier()"></input>
<p id="modStr"></p>
</div>
/form>

You are saying if (race = "cat") which is telling race to be equal to cat, not determining whether it is or not. You need to use == not =
Anyway, your problem lies in this line
var race = document.getElementById("race");
It should be
var race = document.getElementById("race").value;

How about change it to
if (race.value == "cat") {
var strMod = 3;

The mistake in the above line of code is that you are not comparing strings.
if (race = "cat") {
should be changed to
if (race.value == "cat") {

Javascript onchange event

Im trying to use Javascript to change the background color of a text input depending upon a value selected in a drop down box.
I want the background color of "businessname" input to be changed to yellow if "Business" is selected from the dropdown.
This is the HTML for the dropdown
<select id="type" name="type" onchange="individualOrBusiness()">
<option value="select">Select</option>
<option value="business">Business</option>
<option value="individual">Individual</option>
</select>
The input I wish to change
<input type="text" id="businessname" name="businessname">
and the Javascript I have tried
function individualOrBusiness() {
var x = document.getElementById("type").value;
if (x == "Business") {
document.getElementById("businessname").style.backgroundColor = "yellow";
}
}
I've tried a few variations on the above however I cant get it to work, if anyone point me in the right direction?
Cheers

If in doubt look at your data.
alert(x);
Your value will never be "Business".
<option value="business">Business</option>
^^^^^^^^
It is "business" with a lowercase B.

JavaScript events orders returning different values

So, I have 2 events attached to several select elements. A click event and a change event. When the user selects an option, I keep track of previously selected options on a JS object to tell the user that the option is already used and can't be reused and reset that select to the default value. If the select had a previous value that is not default, I remove the property from the object. Now, on each click event, I would have a JS variable give me the value of that select before the change happens. But, because of the difference in order of events been trigger (Firefox and Chrome) for example, in one I get the default which was when it reset, and the other I get the value right before the reset.
HTML:
<html>
<head>
<title>Objects test on Browsers</title>
</head>
<body>
<div class="container">
<select name="dd1">
<option value="0">-Select-</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="bear">bear</option>
</select>
<br />
<br />
<select name="dd2">
<option value="0">-Select-</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="bear">bear</option>
</select>
<br />
<br />
<select name="dd3">
<option value="0">-Select-</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="bear">bear</option>
</select>
<br />
<br />
</div>
</body>
</html>
JavaScript:
var alreadyUsed = {};
var prevField = "";
$(function() {
// Events for drop downs
$("select[name^='dd']").on("focus", function(event) {
prevField = $(this).val();
console.log(prevField);
}).on("change", function(event) {
var fieldInUsed = checkNotUsedAlready("fields", $(this).val());
if (fieldInUsed === true) {
delete alreadyUsed[prevField];
$(this).val(0);
} else {
var selectField = $("select[name='" + event.target.name + "']" + " option:selected");
if (selectField.html() != "-Select-") {
alreadyUsed[selectField.html()] = $(this).val();
} else {
delete alreadyUsed[prevField];
}
}
});
});
function checkNotUsedAlready(type, value) {
var fieldColInUse = false;
if (type == "fields") {
for (var prop in alreadyUsed) {
if (alreadyUsed.hasOwnProperty(prop)) {
if (prop == value) {
fieldColInUse = true;
alert("Field is already in use.\nPlease, select a different field.");
break;
}
}
}
} else if (type == "columns") {
for (var prop in alreadyUsed) {
if (alreadyUsed.hasOwnProperty(prop)) {
if (alreadyUsed[prop] == value) {
fieldColInUse = true;
alert("Column is already in use.\nPlease, select a different column or custom.");
break;
}
}
}
}
return fieldColInUse;
}
I select cat on first drop down. Object now is Object{cat:"cat"}
I select dog on second drop down. Object is now Object {cat:"cat", dog:"dog"}
I select cat on second drop down.
At this point, firefox returns me dog as the previous value, which is what I want, but Chrome returns me zero because of the reset and when it set the value because of the events triggering order. Any ideas how can I deal with this in a different way?
One of the reasons for the JS object is that I need to have a list of which values are used to submit later and which are not used yet. A value needs to be unique.
NOTE: Choose cat for Drop down 1, dog for Drop down 2 and bear for Drop Down 3. Then, choose dog from Drop Down 1. On chrome, it will delete bear but on Firefox, it will delete cat.
Thanks in advance.

Maybe it would help to simplify things a bit. This works for me in Chrome, IE 9+, and Firefox:
var alreadyUsed = [];
$(document).ready( function() {
$("select[name^='dd']").data("previous","0");
$("select[name^='dd']").on("change", function(event) {
var newValue = $(this).val();
var prevValue = $(this).data("previous");
if(alreadyUsed.indexOf(newValue) == -1){
if(prevValue != "0") alreadyUsed.splice( alreadyUsed.indexOf(prevValue), 1 );
alreadyUsed.push(newValue);
$(this).data("previous",newValue);
}else{
alert("Field is already in use.\nPlease, select a different field.");
$(this).val(prevValue);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select name="dd1">
<option value="0">-Select-</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="bear">bear</option>
</select>
<br />
<br />
<select name="dd2">
<option value="0">-Select-</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="bear">bear</option>
</select>
<br />
<br />
<select name="dd3">
<option value="0">-Select-</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="bear">bear</option>
</select>
<br />
<br />
</div>
You code is a bit more complicated, and obviously does other things, but perhaps this simple working version will help.

Display select fields using conditional statements in JS

I am designing a self-service site for people with problems accessing a secure website. I want it to generate drop downs with questions about their situation based on the answers to each previous drop down box. I am trying to use JS and conditional statements to accomplish this. I am not a programmer but I understand it enough to reverse engineer it. Here's what I have so far.
<select id="location" name="location" onclick='test()'>
<option value="0">Is this a personal computer or government computer?</option>
<option value="home">Personal</option>
<option value="gfe">Government</option>
</select>
<select id="home" name="home" style="display: none" onclick='test()'>
<option value="0">Do you have a CAC?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<select id="multi-cac" name="multi-cac" style="display: none" onclick='test()'>
<option value="0">How many CACs do you have?</option>
<option value="1">1</option>
<option value="2">More than 1</option>
</select>
<select id="gfe" name="gfe" style="display: none" onclick='test()'>
<option value="0">Is this a shared computer?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<select id="shared" name="shared" style="display: none" onclick='test()'>
<option value="0">Can other people access OWA on it?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<select id="overseas" name="overseas" style="display: none" onclick='test()'>
<option value="0">Have you recently returned from an overseas deployment?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<div id="overseas-answer" style="display: none" onclick='test()'>
Please visit Milconnect and update your profile. Please wait 24 hours and try accessing your email again. If this does not work, please contact the help desk
</div>
function test() {
if (document.getElementById('location').value == 'home') {
document.getElementById('home').style.display = 'block';
} else {
document.getElementById('home').style.display = 'none';
}
if (document.getElementById('location').value == 'gfe') {
document.getElementById('gfe').style.display = 'block';
} else {
document.getElementById('gfe').style.display = 'none';
}
if (document.getElementById('gfe').value == '1') {
document.getElementById('shared').style.display = 'block';
} else {
document.getElementById('shared').style.display = 'none';
}
if (document.getElementById('shared').value == '1') {
document.getElementById('overseas').style.display = 'block';
} else {
document.getElementById('overseas').style.display = 'none';
}
if (document.getElementById('overseas').value == '1') {
document.getElementById('overseas-answer').style.display = 'block';
} else {
document.getElementById('overseas-answer').style.display = 'none';
}
}
Where I'm getting stuck is I can't figure out how to write the code to say something like "if value for gfe is 1 show shared. if value of gfe is 2 show multicac." when I try to write this it either does not work or it shows drop downs I don't want the user to see yet.
http://jsfiddle.net/JKqWf/341/ Here is a link to it.
Am I going at this wrong? Is there an easier way to do this?
Thanks in advance.

The issue you have with the way you have it is... When test is called it goes down and hits every if and tries to get the value for each drop down displaying or not. You want to only worry about the select that was changed.
For each of the selects do this...
<select id="location" name="location" onchange='test(this.id, this.value)'>
Then for test...
function test(id, val){
if(id == "location"){
handleLocationValues(val);
}
else if(id == "home"){
handleHomeValues(val);
}
...
...
}
Then you can make your "handle values" functions like this...
function handleLocationValue(val){
if(val == "home"){
// write code to show the home drop down..
}
else if{val == "gfe"){
// write code to show the gfe drop down...
}
...
}
You also are going to want to write logic if the user goes back up and changes one of the previous select that you hide all of the visible selects below it.
I noticed that in your fiddle you have jquery selected as one of the frameworks. If you are pulling that in then I would suggest looking into using it as it could make this so much easier. It will also get you to not use inline events and styles.
I hope this helps and good luck.