Select Box example

Zhaoliang Zhang

by Zhaoliang

HTML

<div id="drawing">

</div>

JavaScript

//Create array of option values and a parallel array of text description to be added
var valueArray = ["Volvo","Saab","Mercades","Audi"];
var descriptionArray = ["Select Volvo","Select Saab","Select Mercades","Select Audi" ]

// Now store the div in the html (to which the select will be appended) in a variable

var myDiv = document.getElementById("carDiv");

//Create array of options to be added
var array = ["Volvo","Porsche","Mercades","Audi"];

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
myDiv.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
    
}
var theSelect = document.getElementById('mySelect');
theSelect.addEventListener('change',reportResult);

function  reportResult(){
    var itemSelected = theSelect.value;
    console.log(" The Car Selected is : "+ itemSelected);

}