onChange Drop Down Selector

by Colin Soderstrom

HTML

<div id="myboxcolor"></div>

<select name="color" id="boxColor" onchange="colorChange(this)">
  <option ></option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>

CSS

#myboxcolor {
    background-color: #00F;
    height: 50px;
    width: 50px;
    margin: 10px;
}

JavaScript

function colorChange(x) {
    var boxColor = x.value
    
    if (boxColor == "red") {
        $('#myboxcolor').css("background-color", "#FF0000");
    }
    if (boxColor == "green") {
        $("#myboxcolor").css("background-color", "#00FF00");
    }
    if (boxColor == "yellow") {
        $("#myboxcolor").css("background-color", "#FFFF00");
    }

}