We Keep Coding

JavaScript: Set background colour of <td> in table containing <select> based upon which <option> is selected

I'm not familiar with JavaScript but the software im writing generates a big table in a html file so im having a go at using JavaScript for some styling and behaviours within.
The html file contains a large table of data.
One of the rows of the table contains a drop down box with three (s) with correlated colours:
pass : green |
fail : red |
none : blue
As a visual aid for the user I am trying to set the background colour of the containing the to map to the colour of the selected item.
When the programme starts some of the drop down boxes will be set to pass or fail (or none), Therefore the JavaScript must Set the td background color mapping to the select box :
when the document is first rendered within the browser.
When a select box selected value is changed
So far ive got as far as :
<td align="center" id="dropdownTableData">
<select id = "select" onchange="setColor()">
<option value="green">pass</option>
<option value="red">fail</option>
<option value="blue" selected="selected">none</option>
</select>
</td>
with the JavaScript :
setColor = function() {
var e = document.getElementById("select");
e.style.backgroundColor = e.options[e.selectedIndex].value;
}
Apologies if this is fairly simple but I'm still trying to wrap my head around JavaScript.
EDIT
Now solved (in various ways) see solutions below!

I would recommend changing the classList of the parentNode based on the value of your element.
To listen for a change in your <select>, it may be a bit cleaner to add an event listener to each one. Once your select changes, just call a function that gets the parent, gets the value, and changes the class of your parent based on the value of your element.
var data = document.querySelectorAll('#data-table tr td select');
data.forEach(function(item) {
setColor(item);
item.addEventListener('change', function() {
setColor(this);
});
});
function setColor(element) {
var container = element.parentElement;
container.classList.remove('none', 'pass', 'fail');
var value = element.options[element.selectedIndex].value;
container.classList.add(value);
}
table tr td {
border: 1px solid black;
padding: 5px;
}
table tr td.none {
background-color: blue;
}
table tr td.pass {
background-color: green;
}
table tr td.fail {
background-color: red;
}
<table id="data-table">
<tr>
<td>
<select>
<option value="none" default selected>None</option>
<option value="pass">Pass</option>
<option value="fail">Fail</option>
</select>
</td>
<td>
<select>
<option value="none" default>None</option>
<option value="pass" selected>Pass</option>
<option value="fail">Fail</option>
</select>
</td>
<td>
<select>
<option value="none" default>None</option>
<option value="pass">Pass</option>
<option value="fail" selected>Fail</option>
</select>
</td>
</tr>
</table>

You could change your HTML a bit so it becomes dynamic:
<td align="center" id="dropdownTableData">
<select id = "select" onchange="setColor(this)">
<option value="green">pass</option>
<option value="red">fail</option>
<option value="blue" selected="selected">none</option>
</select>
</td>
JS:
setColor = function(element) {
element.parentNode.style.backgroundColor = element.options[element.selectedIndex].value;
}
Invoke on the start:
var selectElements = document.getElementById('tableID').getElementsByTagName('select')
for (var i = 0; i < selectElements.length; i++) {
setColor(selectElements[i]);
}
Just a small side note:
Although my answer fixes the problems that are stated in the question, I believe the answer that Chase Ingebritson gave is more elegant and easier to maintain in the future.

You can use the parentNode property:
setColor = function() {
var e = document.getElementById("select");
e.parentNode.style.backgroundColor = e.options[e.selectedIndex].value;
}

Jquery not showing select element. No errors in console

I have a "state" select and a few "carrier" selects. for simplicity I'm using only two carrier selects here.
My jquery is suppose to show the carrier selects based on the the state selected.
The state select value is appended to the carrier select name so I can choose which carrier select to add a specific class to.
MY PROBLEM: My carrier selects wont show up. I had this working at one point, and I must've changed something along the way. Not sure whats happening here. Any help would be great. Thanks!
EDIT: I've added my original JS to show where I was, and how I want to change to Jquery.
HTML:
<div style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
JQUERY:
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('div.select-div select').val();
selectDiv = $('#carrier_select')[0] + stateVal;
if ($(stateVal).attr('selected', 'selected')) {
$(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select");
$(selectDiv).addClass("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});
MY JAVASCRIPT (WORKS) BEFORE TRYING JQUERY:
function optionCheck() {
var i, len, optionVal, selectDiv,
selectOptions = document.getElementById("state_select");
// loop through the options in case there
// are multiple selected values
for (i = 0, len = selectOptions.options.length; i < len; i++) {
// get the selected option value
optionVal = selectOptions.options[i].value;
// find the corresponding help div
selectDiv = document.getElementById("carrier_select" + optionVal);
// move on if I didn't find one
if (!selectDiv) { continue; }
// set CSS classes to show/hide help div
if (selectOptions.options[i].selected) {
selectDiv.className = "conn_select nh_select nj_select ny_select";
$(selectDiv).addClass("dropdown-box");
} else {
//Hide carrier select on page load
selectDiv.className = "carrier_select";
}
}
}
// bind the onchange handler
document.getElementById("state_select").onchange = optionCheck;
CSS:
.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.carrier_select {
display: none;
}

First off, your code has some redundancies and some questionable decisions in it in my humble opinion that you could work around in order to simplify and/or make it more usable. However, there is a way to achieve what you want with most of it untouched, using Javascript/jQuery code. For the full thing, check this fiddle, the script is below as well along with its explanation:
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('#state_select').val();
selectDiv = $('#carrier_select'+ stateVal);
$('.dropdown-box:not(#state_select_box)').removeClass('dropdown-box').addClass('carrier_select');
$(selectDiv).removeClass('carrier_select').addClass('dropdown-box');
$($selectDiv).val('0');
}
$('#state_select').change(function(e) {
optionCheck();
});
What this does is it gets the val() of #state_select, appends it to the #carrier_select so that the selector targets the right id, then changes all active selectors, except the #state_selector_box (which I made to wrap around #state_select) to ones with the .carrier_select class, thus making them invisible and then it finally makes the one that corresponds to the selected state visible using the dropdown-box class. Also the val() of the selector that just appeared is set to 0.

You are telling css to hide the element
.carrier_select {
display: none;
}
Both of your select elements have the class "carrier_select" and as a result of this css definition, they are not displayed. Remove or change this definition for them to be shown.

Edited in such a way that you can see the carrier selections. But other part of your question - appending to carrier name, showing carriers depending on the state needs more inputs.
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('div.select-div select').val();
selectDiv = $('#carrier_select')[0] + stateVal;
if ($(stateVal).attr('selected', 'selected')) {
$(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select");
$(selectDiv).addClass("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});
.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="dropdown-box" style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>

Without commenting on the rest of the code, try removing
.carrier_select {
display: none;
}

how do I show all the selected options in the text field

how do I get my javascript to show more than one selected in de text field I am planning on adding way more 's so I don't want to make a insane long array
function myFunction() {
var skilllist = document.getElementById("skilllist");
console.log(skilllist.selectedIndex);
document.getElementById("skillfield").value = skilllist.options[skilllist.selectedIndex].text;
}
<form>
Select your favorite browser:
<select name="skillist[]" id="skilllist" multiple>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
<option value="Laravel">Laravel</option>
<option value="Wordpress">wordpress</option>
</select>
<p>jouw skills zijn: <input type="text" id="skillfield" size="50"></p>
</form>
</div>

I suggest adding an event handler on blur event to the select element.
With such an approach you are able to select one or more list items and dynamically render their text content.
document.getElementById("skilllist").addEventListener('blur', function(e){
var options = e.target.options,
selected_content = "";
for (var i = 0; i < options.length; i++) {
if (options[i].selected) selected_content += options[i].textContent + ", ";
}
document.getElementById("skillfield").value = selected_content;
});
https://jsfiddle.net/zLyw7vhd/
For mobile devices : try to replace event name 'blur' to 'focusout'
(or 'change') in addEventListener function

Show / Hide Form Elements based on Select

I'm trying to Show / Hide two elements based on a selection - a label and an input using Javascript getElementsByName. It works with getElementByID if I change things around on the label and input but for some reason Name isn't working. Here is the code:
<script language="JavaScript" type="text/javascript">
<!--
function Toggle(obj){
var val=obj.value;
if (!obj.m){ obj.m=''; }
if (!obj.m.match(val)){ obj.m+=','+val+','; }
var hide=obj.m.split(',');
for (var zxc0=0;zxc0<hide.length;zxc0++){
if (document.getElementsByName(hide[zxc0])){
document.getElementsByName(hide[zxc0]).style.display='none';
}
}
var show=val.split(',');
for (var zxc1=0;zxc1<show.length;zxc1++){
if (document.getElementsByName(show[zxc1])){
document.getElementsByName(show[zxc1]).style.display='';
}
}
}
//-->
</script>
and here are for form elements:
<div id="styled-select">
<select name="how" onchange="Toggle(this);" class="dropdown">
<option value="Internet Search">Internet Search</option>
<option value="Facebook" >Facebook</option>
<option value="Twitter" >Twitter</option>
<option value="LinkedIN" >LinkedIN</option>
<option value="Referral">Referral</option>
<option value="Other">Other</option>
</select>
</div>
<label name="Referral" style="display:none;">Referred By:</label>
<input name="Referral" style="display:none;" value="" class="hidden-txt">
When the user selects "Referal" it should display the Label and Input named "Referral". I had this working if I used getElementByID, gave the option two values separated by comma and used seperate IDs for the label and input.
Thank you for your help.

var elems = document.getElementsByName(hide[zxc0]);
if(elems) {
for(var i = 0;i < elems.length;i++) {
elems[i].style.display='none';
//Do whatever else you need to do with the element.
}
}
As mentioned by Kevin Boucher, getElementsByName returns an array. Assuming that you want to apply the display=none style to all elements with that name, the code above will achieve that. Also for performance's sake, the above code only calls document.getElementsByName() once as opposed to the 3+ times above which I'm sure will be beneficial.
It might be worth investigating JQuery for its ease of selecting elements.

HTML Select: How can you change the label when the <select> is closed?

Consider this:
<select name="month_selection">
<optgroup label="2012">
<option value="1">January</option>
</optgroup>
<optgroup label="2011">
<option value="1">January</option>
<option value="2">February</option>
The HTML above looks like #1 when open, and #2 when closed.
How can I get the closed version to look like #3?
The purpose is to also show the selected year without repeating it in the open options (so it looks cleaner).

My original (marked correct) answer is too old to be of use, so here is a more up-to-date answer that may be a helpful starting point. It has some weirdness around the select box width that would need resolving according to your UI structure. Hope it is helpful.
document.querySelector('select').addEventListener("change", function(e) {
var value = e.target.value
var option = e.target.querySelector("option[value='" + value + "']")
var group = option.parentElement
var display = document.querySelector("#value")
var text = option.text + " " + group.label
display.innerText = text
})
#wrapper {
position: relative;
}
#value {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
font-size: 0.8rem;
padding-left: 0.5em;
}
select {
color: #FFFFFF;
width: 100%;
}
select option {
color: black;
}
<html>
<div id="wrapper">
<div id="value">Select Date…</div>
<select>
<optgroup label="2012">
<option value="1">January</option>
<option value="2">February</option>
</optgroup>
<optgroup label="2013">
<option value="3">January</option>
<option value="4">February</option>
</optgroup>
</select>
</div>
</html>
Old Answer (2012)
Its good to see someone making efforts to keep a good clean UI. Kudos, more people should do this. However I'd advise against approaching to problem this way. You run a risk of trying to force an element to do something it wasn't designed to do. Even if you find a workaround, it might end up putting you into cross browser testing hell, or simply stop working on a new browser version.
I'd suggest replacing this with a JQuery or similar scriptable SELECT widget replacement such as http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/. This will give you all the flexibility you need to tweak the display through JavaScript.

This is a fairly simple way of doing it... Use change/input and when it is focused, reset the text to whatever is before the year.
Appears to work well in all browsers that I have tested.. The problem is that no matter what you do, you're always going to have to change the text value of the selected element, there is no way around that. Test yourself without deploying here - http://jsfiddle.net/CTwJy/
<select name="month_selection" id="month_selection">
<optgroup label="2012">
<option value="1">January</option>
</optgroup>
<optgroup label="2011">
<option value="1">January</option>
<option value="2">February</option>
</optgroup>
</select>
<script type="text/javascript">
function attach(ele, evt, cb) { ele.addEventListener ? ele.addEventListener(evt, cb) : ele.attachEvent('on' + evt, cb); }
function evSupported(ele, evt) { return ((('on'+evt) in ele) ? true : (function(ele, evt) { ele.setAttribute('on'+evt, 'return;'); return (typeof ele['on'+evt] == 'function'); })()); };
var selectBox = document.getElementById('month_selection');
attach(selectBox, (evSupported(selectBox, 'input') ? 'input' : 'change'), function() {
this.options[this.selectedIndex].innerText += ' ' + this.options[this.selectedIndex].parentNode.label;
this.blur();
});
attach(selectBox, 'focus', function() {
for (var i = 0; i < this.options.length; i++) {
this.options[i].innerText = this.options[i].innerText.split(' ')[0];
}
});
</script>

This isn't tested, so it may not work or may have bugs (for instance, it might permanently change the option's label), but perhaps it will give you some insight.
<script type="text/JavaScript">
function changeLabel()
{
var dropDown = document.getElementById("selMonth");
dropDown.options[dropDown.selectedIndex].label += " "+ dropDown.options[dropDown.selectedIndex].parentNode.label;
}
</script>
<select name="month_selection" id="selMonth" onchange="changeLabel()">
<optgroup label="2012">
<option value="1">January</option>
</optgroup>
<optgroup label="2011">
<option value="1">January</option>
<option value="2">February</option>