HTML: Select Kullanımı

Bu dersimizde HTML'de Select kullanımını öğrenelim.

Bu dersimizde HTML'de Select kullanımını öğrenelim.

Bir çok amaçlı olarak kullanabileceğimiz ve amacımıza göre şekillendirilerek değerlendirebileceğimiz bazı yöntemleri birlikte öğrenelim.

1.YÖNTEM

Select listeleme yaparken girilen value="" değerleri adres,sayfa adresi yönlendirme geçiş işlemini gerçekleştirir.

Örnek:


<select name="bilgi" onchange="location = this.options[this.selectedIndex].value;">

<option selected value="">Seçiniz</option>

<option value="index.php">Ana Sayfa</option>

<option value="iletisim.php">İletişim</option>

</select>



2.YÖNTEM

Select listeleme yaparken girilen value="" değerleri yöntemi ile adres,sayfa adresi yönlendirme geçiş işlemini gerçekleştirir.


Örnek:

<select onchange="document.location.href=this.value"> 

<option selected value="">Seçiniz</option>

<option value="http://www.sanalkurs.net">Ana Sayfa</option>

<option value="http://www.sanalkurs.net/e-dergi.html">E-Dergi</option>

<option value="http://www.sanalkurs.net/forum/">Forum</option>

</select>




3.YÖNTEM

JAVASCRİPT İle seçim işlemi; value="" değeri web sayfa adresi olarak girilir. JAVASCRİPT İle id="yonlendirme" ile veriler sayfa içerisine girilen adresler gösterilir.


Örnek:

<select id="yonlendirme">

<option selected value="">Seçiniz</option>

<option value="http://www.sanalkurs.net">Ana Sayfa</option>

<option value="http://www.sanalkurs.net/e-dergi.html">E-Dergi</option>

<option value="http://www.sanalkurs.net/forum/">Forum</option>

</select>



<script type="text/javascript">

$('#yonlendirme').change(function() {

     window.location = $(this).val()

});

</script>



4.YÖNTEM

JAVASCRİPT İle seçim işlemi; value="" değeri sayfanızın adı olarak girilir, yani index.php yerine index girilmelidir, ayrıca .php değeri
yerine .html gibi değerleri girerek değiştirebilirsiniz.

Örnek:

<select name="bilgi" onchange="javascript:sec(this)">

<option selected value="">Seçiniz</option>

<option value="index">Ana Sayfa</option>

<option value="iletisim">İletişim</option>

</select>



<script type="text/javascript">

function sec(elm)

{

window.location = elm.value+".php"; // .html, vb. değiştirebilirsiniz.

}

</script>



Not: kısmına aşağıdaki içeriği ekleyiniz.

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

</head>


  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 3 yıl önce
Teşekkürler.Çok yararlı oldu.Elinize sağlık

Yukarı Git