Javascript

Js Selectbox İçerisine Dizi Elemanlarını Ekleme

Js Selectbox İçerisine Veri Doldurma

Bu yazıda jQuery kullanılarak selectbox’a verinin nasıl aktarılacağını göstereceğim. Selectbox içerisine veri nasıl çekilir, dizi elemanlarını selectbox’a eklemeyi aynı zamanda selectbox’a options ekleme olayını da aşağıda canlı demo ve kaynak kodları ile birlikte görebilirsiniz.

Canlı Demo


Aşağıdaki kaynak kodlar “Html + CSS + JS “ ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.

KAYNAK KODLAR İÇİN

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<TITLE>Js Diziyi Selectbox'a aktarma </TITLE>
</head>
<body>
<div style="border: 1px solid green; height:140px; width:300px;">
<div style="text-align:center;" id="diziElemanlari"></div><br><br>
<select id="selectID">
<option selected value="-1">Lütfen Seçiniz</option>
</select>
<button id="selectGonder">Diziyi İçeri Aktar</button>
</div>

<script type="text/javascript">
var dizi=["Elma","Armut","Üzüm","Kavun"];
$("#diziElemanlari").append("<b style='color:darkred;'>Dizideki Elemanlar:</b><br>" + dizi);
$("#selectGonder").on("click", function(){

var options='<option value="-1" selected="selected">Lütfen Seçiniz</option>';

for (var item in dizi ) {
   options +="<option value='" + item + "'>" + dizi[item] + "</option>"; 
}
$("#selectID").html(options);
});	
</script>
</body>
</html>

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu