2 Drop Down dalam 1 kategori

Demo :




Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Penempatannya
dibawah <body>
........
diatas </body>

<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Tutorial Blogger</option>
<option>Tutorial Kode</option>
<option>Template Blogger</option>
</select>
<select name="stage2" size="1">
<option value="">Select Categories</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()"/>
</p>

<script type='text/javascript'>
//<![CDATA[

/*
2 Drop Down dalam 1 kategori By JavaScript Kit (http://www.javascriptkit.com/script/cut183.shtml)
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

//Kategori Pertama
group[0][0]=new Option("Cara membuat Blogspot","http://nanoyulianto.blogspot.com/2010/05/cara-membuat-blog-buat-pemula-di.html")
group[0][1]=new Option("Cara Posting","http://nanoyulianto.blogspot.com/2010/05/cara-posting-di-blogger.html")
group[0][2]=new Option("Rekomendasi Dashboard","http://nanoyulianto.blogspot.com/2010/05/rekomendasi-bahasa-pada-dashboard.html")
group[0][3]=new Option("Settings Blogspot","http://nanoyulianto.blogspot.com/2010/05/cara-setting-atau-pengaturan-blogspot.html")

//Kategori Kedua
group[1][0]=new Option("HTML","http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-html.html")
group[1][1]=new Option("XHTML","http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-xhtml.html")
group[1][2]=new Option("CSS","http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-css.html")

//Kategori Ketiga
group[2][0]=new Option("Pernak Pernik","http://nanoyulianto.blogspot.com/2011/01/pernak-pernik-template-blogger-penuh.html")
group[2][1]=new Option("N2y Eksperiment","http://nanoyulianto.blogspot.com/2010/09/template-n2y-eksperiment.html")
group[2][2]=new Option("N2y Sedikit Mirip","http://nanoyulianto.blogspot.com/2010/08/template-n2y-sedikit-mirip.html")
group[2][3]=new Option("N2y Suka-Suka","http://nanoyulianto.blogspot.com/2010/08/template-n2y-suka-suka.html")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}

//]]>
</script>

</form>



Credit : JavaScript Kit

Alhamdulillah

2 comments:


  1. ini gimana...kalau pake widget gimana?
    semuanya ditaruh di widget kan?

  2. Jika dibawah tag <body> bisa diletakkan didalam widget...

Posting Komentar


Creative Commons License
2 Drop Down dalam 1 kategori by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/01/2-drop-down-dalam-1-kategori.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.