select link href

Select (Açılır) Menüye Link Vermek

Merhabalar,

Ara sıra benim de ihtiyaç duyduğum bir konuyu daha burada paylaşmak istedim. İhtiyacımız: Açılır menüye link vermek.

Durumu açıklama gerekirse, HTML’de olan <select> etiketi ile bir açılır menü oluşturuyoruz ve açılan menüde yer alan seçeneklerden hangisine tıklanırsa, tıklanan seçenek için belirlediğimiz linke (bağlantıya) kullanıcıyı yönlendiriyoruz. İşlemlere başlamadan önce <select> ve <option> taglerini biliyor olmamız gerekir. Bilmiyorsak da, çok zor olmadığı için kısa bir şekilde yazıda örneklerle değiniyor olacağım.

<select> açılır yani seçenekli menümüzü oluşturan tage verilen isimdir. Bu açılır menüde seçenekleri göstermek için ise <option> tagini kullanıyoruz.

<select onchange=”window.location.href=this.value;”>
<option disabled>Menü Örneği</option>
<option value=”http://www.mustafacagri.com/klasordeki-tum-dosyalarin-uzantisini-degistirmek”>Klasördeki Tüm Dosyaların Uzantısını Değiştirmek</option>
<option value=”http://www.mustafacagri.com/2014-teknogirisim-sermayesi-destegi-analizi”>2014 Teknogirişim Sermayesi Desteği Analizi</option>
<option value=”http://www.mustafacagri.com/”>MustafaCagri.com Anasayfa</option>
</select>

Örnek: 

Evet, işte yukarıdaki kodu kullandığınızda sonuç bu şekilde olacaktır. Buradaki değerleri ve yapılan işlemleri açıklamak gerekirse; <select onchange=”javascript kodu”> buradaki javascript kodu menüden bir seçenek çalıştırıldığında çalışacak javascript kodunu belirtir. Yani seçeneği seçtiğimizde hangi işlemi yapacağımızı buradan belirtiyoruz. window.location.href ise Java Script‘te yönlendirme yaramaktadır. Bu koddan sonra yazılan adrese yönlendirme yapılmasını sağlar. this.value ise seçilen seçeneğin değerini belirtmektedir. Yani seçimlerin değerlerini birer URL (adres) olarak belirttiğimiz için de bu adreslere yönlendirilme yapılmasını sağlamaktadır.

İşte bu kadar! Çok kısa bir şekilde bu işlemler sayesinde istediğimiz sonuca ulaşabiliriz. Ayrıca, buradaki kodları farklı amaçlar için de kullanarak, bir çok ihtiyacınızı karşılayabilirsiniz.

Aklınıza takılan ya da yapamadığınız kısımlar olursa da lütfen yorum yaparak soru sormaktan çekinmeyiniz. Ayrıca, farklı geliştirmeler ve eklemeler ile bu yazıya katkı sağlayabileceğinizi de bilmelisiniz.

Hatasız kod yazmanız dileğiyle :)

Bir önceki yazımız olan Klasördeki Tüm Dosyaların Uzantısını Değiştirmek başlıklı makalemizde bat dosyası oluşturmak, Bilinen dosya türler için uzantıları gizle ve dosya uzantılarını programsız değiştirme hakkında bilgiler verilmektedir.

18 Aralık 14
1 yorum
Mustafa Çağrı Pinterest

Select (Açılır) Menüye Link Vermek” üzerine bir düşünce

  1. taner turan

    Hocam selectmenü ile 81 ilimizi listelemek ve verileri çekmek için nasıl yapacagız? veritabanıu kısmını anlatabilirmisiniz. Mesela İstanbul ilini seçtiği zaman istanbulun ilçelerinide göstermesini nasıl sağlayabiliriz. Dersinizde kod kısmını anlatmılınız amam veritabanında ne yapacagız? O konuda bir açıklama yaparsanız çooookkk menmun olacagım.

    Yanıtla

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir