Dynamically Populating Drop Down List
Here is a sample code on how to use JavaScript to populate a drop down list based on selection of another. Enjoy.
<html>
Negeri : <select id="ddlNegeri" onchange="setupDaerah();"></select>
Daerah : <select id="ddlDaerah"></select>
</html>
<script type="text/javascript">
var data = {
"Selangor" : ["Ampang", "Kuala Selangor", "Hulu Langat", "Sabak Bernam"],
"Johor" : ["Larkin", "Skudai", "Muar"],
"Melaka" : ["Ayer Keroh", "Alor Gajah"],
"Negeri Sembilan" : ["Rembau", "Nilai"]
};
//setup ddlNegeri
var ddlNegeri = document.getElementById("ddlNegeri");
for (n in data)
ddlNegeri.options[ddlNegeri.options.length] = new Option(n);
function setupDaerah() {
var ddlDaerah = document.getElementById("ddlDaerah");
var selData = data[ddlNegeri.options[ddlNegeri.selectedIndex].text];
//remove old items
while (ddlDaerah.options.length > 0)
ddlDaerah.remove(0);
//put in new items
for (d in selData)
ddlDaerah.options[ddlDaerah.options.length] = new Option(selData[d]);
}
</script>
Trackbacks
Use this link to trackback from your own site.
Latest Entries
viewing ur profile kt http://www.putera.com/tanya/index.php?showuser=1591….
like to talk with u, tp xde shoutbox kt sinih..would u min to add my ym id:lenyemiliza@yahoo.com..
well, ok :)
welcome to anti-keseronokan :D
aku baru belajar javascript. camna nak populate data dari javascript display kat html. Aku cumer tau guna document.writeln
selain document.writeln(), boleh pakai document.write() ..LOL.
hihi, selain guna write() kita boleh alter innerHTML utk element2 yg ada dlm html page tu.. katakan kita ada satu DIV, id nya “theDiv”, boleh buat mcm ni.
var d = document.getElementById(”theDiv”);
d.innerHTML = “w00t!”;
atau sebenarnya nak guna innerHTML utk body pun boleh..
body.innerHTML = “super w00t!”;
satu lagi ialah menggunakan DOM utk create element sendiri..
var d = document.createElement(”DIV”);
d.appendChild(document.createTextNode(”ultra w00t!”));
document.body.appendChild(d);
kalau tahu DOM boleh buat mcm2..
search more on “manipulating javascript dom”..
menarik juga code ni,,,bukan hak milik syarikat ke?
Code ni sykt bapak aku yang punya! :D
takde lah, tak ada copyright, bukan milik sykt tmpt aku bekerja.