This blog has moved to http://ikhwanhayat.net

Friday, February 10, 2006

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>

6 Comments:

At 2/15/2006 08:26:00 am, Anonymous Anonymous said...

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..

 
At 2/15/2006 09:05:00 am, Blogger Ikhwan Hayat said...

well, ok :)
welcome to anti-keseronokan :D

 
At 2/17/2006 03:26:00 pm, Anonymous Anonymous said...

aku baru belajar javascript. camna nak populate data dari javascript display kat html. Aku cumer tau guna document.writeln

 
At 2/17/2006 08:31:00 pm, Blogger Ikhwan Hayat said...

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"..

 
At 3/15/2006 06:53:00 pm, Anonymous Anonymous said...

menarik juga code ni,,,bukan hak milik syarikat ke?

 
At 3/15/2006 09:44:00 pm, Blogger Ikhwan Hayat said...

Code ni sykt bapak aku yang punya! :D

takde lah, tak ada copyright, bukan milik sykt tmpt aku bekerja.

 

Post a Comment

<< Home