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: Menü ÖrneğiKlasördeki Tüm Dosyaların Uzantısını Değiştirmek2014 Teknogirişim Sermayesi Desteği AnaliziMustafaCagri.com Anasayfa

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 :)