javascript dropdown menu

soulburn · 13.03.2002

iki tane dropdown menum var.

birincide altalta PHP,ASP,grafik vs. sıralanıcak. bunlardan herhangi birini seçtiğim zaman ikinci dropdownda bu seçtiğim kritere göre konular sıralanıcak.

yani
1. de PHP seçtiğimde 2. de apache,MySQL vs.
1. de ASP seçtiğimde 2. de iss,access,mssql vs.
1. de grafik seçtiğimde 2. de Photoshop,fireworks vs.
sıralanıcak.

bunu JavaScript ile nası yapabilirim? umarım anlatabilmişimdir..

Scud · 13.03.2002

Aslında kod daha da kısaltılıp basitleştirilebilir de uğraşamadım. Umarım bu işine yarar.

Kod:

<HTML>
<HEAD>
<META name=VI60_defaultClientScript content=JavaScript> 
<meta http-equiv="Content-Type" content="text/HTML; charset=windows-1254"> 
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> 
<META NAME="AUTHOR" Content="Deniz Dursun (Scud)"> 
<TITLE></TITLE>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!--
function yarat(secenek){
var secim=secenek;
switch(secim){
case "PHP":phpyarat();break;
case "ASP":aspyarat();break;
case "grafik":grafikyarat();break;
}
}
function phpyarat(){
degerler= new Array("MySQL","apache");
textler= new Array("MySQL","apache");
	for(i=0;i<degerler.length;i++){
	yeniop=document.createElement("OPTION");
	yeniop.value=degerler[i];
	yeniop.text=textler[i];
	cocuk.add(yeniop);
	}
}
function aspyarat(){
degerler=new Array("iis","access","mssql");
textler=new Array("iis","access","mssql");
	for(i=0;i<degerler.length;i++){
	yeniop=document.createElement("OPTION");
	yeniop.value=degerler[i];
	yeniop.text=textler[i];
	cocuk.add(yeniop);
	}
}
function grafikyarat(){
degerler= new Array("ps","fw");
textler= new Array("Photoshop","fireworks");
	for(i=0;i<degerler.length;i++){
	yeniop=document.createElement("OPTION");
	yeniop.value=degerler[i];
	yeniop.text=textler[i];
	cocuk.add(yeniop);
	}
}
function temizle(){
boyut=cocuk.options.length;
	for(j=0;j<boyut;j++){
	cocuk.remove(cocuk.options[j]);
	}

}
//-->
</script>
<SELECT id=anne name=anne onchange="temizle();yarat(this.options[this.selectedIndex].value)">
<OPTION selected value="">Lütfen Seçiniz</OPTION>
<OPTION value="PHP">PHP</OPTION>
<OPTION value="ASP">ASP</OPTION>
<OPTION value="grafik">grafik</OPTION>
</SELECT>
<SELECT id=cocuk name=cocuk>
<OPTION selected value="">Lütfen Sol taraftan Seçiminizi yapınız</OPTION>
</SELECT>
</BODY>
</HTML>

Iyi çalışmalar...

biolight · 14.03.2002

Kod:

<HTML>
<head>
<title>Biolight - switch</title>
<script language="JavaScript">
function secim() { 
switch (dersler.konu.selectedIndex) {
case 0 : document.dersler.PHP.disabled=true;
         document.dersler.PHP.style.display="block";
         document.dersler.ASP.style.display="none";
         document.dersler.grafik.style.display="none";
break
case 1 : document.dersler.PHP.disabled=false;
         document.dersler.PHP.style.display="block";
         document.dersler.ASP.style.display="none";
         document.dersler.grafik.style.display="none";
break
case 2 : document.dersler.PHP.style.display="none";
         document.dersler.ASP.style.display="block";
         document.dersler.grafik.style.display="none";
break
case 3 : document.dersler.PHP.style.display="none";
         document.dersler.ASP.style.display="none";
         document.dersler.grafik.style.display="block";
break } 
document.body.focus();
}

function git(menu) {
window.location.href=menu.options[menu.selectedIndex].value;}
</script>

</head>
<body>

<form name="dersler">
<table><tr><td>

<select onChange="secim();" name="konu">
<option value="">Bir Konu</opsition>
<option>PHP</option>
<option>ASP</option>
<option>grafik</option>
</select>

</td><td>

<select name="PHP" onChange="git(this);" disabled="disabled">
<option value="">Seçiniz</opsition>
<option value="php1.HTML">php1</opsition>
<option value="php2.HTML">php2</opsition>
</select>

<select name="ASP" onChange="git(this);" style="display:none">
<option value="">Seçiniz</opsition>
<option value="asp1.HTML">asp1</opsition>
<option value="asp2.HTML">asp2</opsition>
</select>

<select name="grafik" onChange="git(this);" style="display:none">
<option value="">Seçiniz</opsition>
<option value="grafik1.HTML">grafik1</opsition>
<option value="grafik2.HTML">grafik2</opsition>
</select>

</td></tr></table>
</form>

</body>
</HTML>

Scud · 14.03.2002

Helâl sana hocam. Ellerine sağlık ;)

soulburn · 14.03.2002

süper, her ikinizede çok teşekkürler.

Elleriniz dert görmesin.

Scud · 19.03.2002

Yeni Kod (kısaltılmış ve geliştirilmiştir):

Kod:

<HTML>
<HEAD>
<META name=VI60_defaultClientScript content=JavaScript> 
<meta http-equiv="Content-Type" content="text/HTML; charset=windows-1254"> 
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> 
<META NAME="AUTHOR" Content="Deniz Dursun (Scud)"> 
<TITLE></TITLE>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!--
function yarat(secenek){
var secim=secenek;
switch(secim){
case 0:
cocukundivi.innerHTML="";
break;
case 1:
degerler= new Array("MySQL","apache");
textler= new Array("MySQL","apache");
neym="phpcesidi";
break;
case 2:
degerler=new Array("iis","access","mssql");
textler=new Array("iis","access","mssql");
neym="aspcesidi";
break;
case 3:
degerler= new Array("ps","fw");
textler= new Array("Photoshop","fireworks");
neym="grafikcesidi";
break;
}
if(secim!=0){for(i=0;i<degerler.length;i++){
yeniop=document.createElement("OPTION");
yeniop.value=degerler[i];
yeniop.text=textler[i];
cocuk.add(yeniop);
cocuk.name=neym;
}
}
}
function temizle(){
cocukundivi.innerHTML="<SELECT id=cocuk name=\"cesit\"></select>";;
boyut=cocuk.options.length;
	for(j=0;j<boyut;j++){
	cocuk.remove(cocuk.options[j]);
	}
yeniop=document.createElement("OPTION");
yeniop.value="";
yeniop.text="Lütfen Seçiniz";
cocuk.add(yeniop);
}
//-->
</script>
<table border=1><tr><td>
<SELECT id=anne name=anne onchange="temizle();yarat(this.selectedIndex)">
<OPTION selected value="">Lütfen Seçiniz</OPTION>
<OPTION value="PHP">PHP</OPTION>
<OPTION value="ASP">ASP</OPTION>
<OPTION value="grafik">grafik</OPTION>
</SELECT></td><td>
<div id="cocukundivi">
</div></td></tr></table>
</BODY>
</HTML>

biolight · 20.03.2002

Helâl sana Scud. Ellerine sağlık ;)
Romaya çıkan 3. bir yol yazmışsın

Bu da benden romaya çıkan 4. yol :)

Kod:

<HTML>
<head>
<title>Biolight - Selected</title>
 
<script language="JavaScript">
function secim() { 
var myform=document.dersler;
if(yok.selected==true){
myform.yok.style.display="block";
myform.PHP.style.display="none";
myform.ASP.style.display="none";
myform.grafik.style.display="none";}
 
if(PHP.selected==true){
myform.yok.style.display="none";
myform.PHP.style.display="block";
myform.ASP.style.display="none";
myform.grafik.style.display="none";}
 
if(ASP.selected==true){
myform.yok.style.display="none";
myform.PHP.style.display="none";
myform.ASP.style.display="block";
myform.grafik.style.display="none";}
 
if(grafik.selected==true){
myform.yok.style.display="none";
myform.PHP.style.display="none";
myform.ASP.style.display="none";
myform.grafik.style.display="block";}
 
document.body.focus();
}
 
function git(menu) {
window.location.href=menu.options[menu.selectedIndex].value;}
</script>
 
</head>
<body>
 
<form name="dersler">
<table><tr><td>
 
<select onChange="secim();">
<option id="yok">Bir Konu</opsition>
<option id="PHP">PHP</option>
<option id="ASP">ASP</option>
<option id="grafik">grafik</option>
</select>
 
</td><td>
<select name="yok" disabled="disabled">
<option>Seçiniz</opsition>
</select>
 
<select name="PHP" onChange="git(this);" style="display:none">
<option value="">Seçiniz</opsition>
<option value="php1.HTML">php1</opsition>
<option value="php2.HTML">php2</opsition>
</select>
 
<select name="ASP" onChange="git(this);" style="display:none">
<option value="">Seçiniz</opsition>
<option value="asp1.HTML">asp1</opsition>
<option value="asp2.HTML">asp2</opsition>
</select>
 
<select name="grafik" onChange="git(this);" style="display:none">
<option value="">Seçiniz</opsition>
<option value="grafik1.HTML">grafik1</opsition>
<option value="grafik2.HTML">grafik2</opsition>
</select>
 
</td></tr></table>
</form>
 
</body>
</HTML>

Scud · 20.03.2002

Senin de ellerine sağlık hocam da şey dicem ben
Gâliba biz ikimiz farklı şeyleri yapıyoruz

)
Sen yönlendirme scripti yazıyosun ben de form için yapıyorum. Benimkinde 2 numaralı select olmadığı için adam formu gönder dediğinde bişey seçmemişse 2 nolu selecte dair bir bilgi gitmiyor eğer seçerse gidiyor. zaten cocuk.name diyerek ismi de formda kullanılacağını göz önünde bulundurarak değiştiriyorum. Sen ise yönlendirme olayı yapıyosun

Neyse aynı thread altında iki tane script de hoş oldu

Emrah ERYILMAZ · 17.10.2007

üstad ellerinize kollarınıza sağlık.. tam istediğim noktada imdadıma bu konu yetişti..

13.03.2002	#1 (permalink)
soulburn Üyelik Tarihi: 29.11.2000 Yer: istanbul Yaş: 28 Mesaj: 1,189	javascript dropdown menu iki tane dropdown menum var. birincide altalta PHP,ASP,grafik vs. sıralanıcak. bunlardan herhangi birini seçtiğim zaman ikinci dropdownda bu seçtiğim kritere göre konular sıralanıcak. yani 1. de PHP seçtiğimde 2. de apache,MySQL vs. 1. de ASP seçtiğimde 2. de iss,access,mssql vs. 1. de grafik seçtiğimde 2. de Photoshop,fireworks vs. sıralanıcak. bunu JavaScript ile nası yapabilirim? umarım anlatabilmişimdir.. __________________ Since 2k - CG \| U.K.

14.03.2002	#4 (permalink)
Scud Üyelik Tarihi: 25.08.2001 Yer: Antalya Yaş: 27 Mesaj: 970	Helâl sana hocam. Ellerine sağlık ;) __________________ Take me back to my boat on the river and I won't cry out any more Mesaj Scud tarafından 14.03.2002 (12:14) yeniden düzenlendi..

14.03.2002	#5 (permalink)
soulburn Üyelik Tarihi: 29.11.2000 Yer: istanbul Yaş: 28 Mesaj: 1,189	süper, her ikinizede çok teşekkürler. Elleriniz dert görmesin. __________________ Since 2k - CG \| U.K.

20.03.2002	#8 (permalink)
Scud Üyelik Tarihi: 25.08.2001 Yer: Antalya Yaş: 27 Mesaj: 970	Senin de ellerine sağlık hocam da şey dicem ben Gâliba biz ikimiz farklı şeyleri yapıyoruz ) Sen yönlendirme scripti yazıyosun ben de form için yapıyorum. Benimkinde 2 numaralı select olmadığı için adam formu gönder dediğinde bişey seçmemişse 2 nolu selecte dair bir bilgi gitmiyor eğer seçerse gidiyor. zaten cocuk.name diyerek ismi de formda kullanılacağını göz önünde bulundurarak değiştiriyorum. Sen ise yönlendirme olayı yapıyosun Neyse aynı thread altında iki tane script de hoş oldu __________________ Take me back to my boat on the river and I won't cry out any more

17.10.2007	#9 (permalink)
Emrah ERYILMAZ Üyelik Tarihi: 18.09.2007 Yer: Istanbul Yaş: 23 Mesaj: 16	Re: javascript dropdown menu üstad ellerinize kollarınıza sağlık.. tam istediğim noktada imdadıma bu konu yetişti.. __________________ <? php; ?> anlarım, anlatırım, anlatılanı anlarım.

Sponsorlu Bağlantılar
Zoque.Forum Reklam