Kursus dan Bimbingan Belajar: Make A Simple Bus Order Option Using JavaScript

1. Type this following HTML source code in your web editor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Top Bus Manufactures: Pull-down Menu</title>

</head>

<body>

<h1>Bus Manufactures</h1>

( Choose based on your appropriate requirement )

</center>

You can choose from one of this following options:

</select>

</form>

<!-- //

// create an Array using the javascript keyword new

var busBrands = new Array(14);

// changing Array element

busBrands[0] = "Anhui Ankai Automobile Co. Ltd";

busBrands[1] = "GAZ Group";

busBrands[2] = "Higer Bus";

busBrands[3] = "Isuzu";

busBrands[4] = "Iveco";

busBrands[5] = "Kamaz";

busBrands[6] = "Marcopolo S.A.";

busBrands[7] = "Mercedes Benz Daimler AG";

busBrands[8] = "NFI Group";

busBrands[9] = "Scania AB";

busBrands[10] = "Solaris Bus";

busBrands[11] = "Toyota";

busBrands[12] = "Volkswagen (VW)";

busBrands[13] = "Volvo";

busBrands[14] = "Zhengzhou Yutong Bus Co., Ltd.";

// feed the option element

var optBusBrands;

var selectBusBrands = document.getElementById("listBusBrands");

for (iLoop = 0; iLoop < busBrands.length; iLoop++) {

optBusBrands = new Option(busBrands[iLoop], busBrands[iLoop]);

selectBusBrands.options.add(optBusBrands);

}

function doShowTheOptions(form) {

document.getElementById("outputBusBrands").innerText = form.options[getSelectedValue()].value;

}

function getSelectedValue() {

return document.frmBusBrands.listBusBrands.selectedIndex;

}

// -->

</script>

</body>

</html>

2. Save as BusManufacturerOptions1.htm

3. Open in your browser.

Notes

Type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> in one line.
Type <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> in one line.
Type <select name="listBusBrands" id="listBusBrands" onchange="doShowTheOptions(this)" size="1"> in one line.
Type var selectBusBrands = document.getElementById("listBusBrands"); in one line.
Type optBusBrands = new Option(busBrands[iLoop], busBrands[iLoop]); in one line.
Type document.getElementById("outputBusBrands").innerText = form.options[getSelectedValue()].value; in one line.
Type return document.frmBusBrands.listBusBrands.selectedIndex; in one line.