Jquery ve PHP Kullanarak Ajax ile Dinamik Select Örneği Oluşturmak
Bir select kutusu içerisindeki optionları ajax ile alıp yüklemek için yapmamız gerekenler.
Jquery $.ajax fonksiyonu ile çağıracağımız PHP dosyamız
unset($Dizi);
$Departmanlar = mysql_query("SELECT * FROM urunler_departmanlar");
while ($Dp = mysql_fetch_object($Departmanlar)) {
$Dizi.='<option value="'.$Dp->no.'">'.$Dp->ad.'';
}
echo $Dizi;
$Departmanlar = mysql_query("SELECT * FROM urunler_departmanlar");
while ($Dp = mysql_fetch_object($Departmanlar)) {
$Dizi.='<option value="'.$Dp->no.'">'.$Dp->ad.'';
}
echo $Dizi;
Dinamik olarak select kutusu içerisini güncelleyecek javascript kodumuz
$.ajax({
type: "GET",
url: "urunler_departman_marka_model_ekle_.php",
data: { departman_islem: EkleMiGuncelleMi, departman_no: DepartmanNo },
dataType: "html",
cache: false,
success: function (DonenVeri) {
$('[name=departmanlar]').find('option').remove();
$('[name=departmanlar]').html(DonenVeri);
}
}).done(function() {
});
type: "GET",
url: "urunler_departman_marka_model_ekle_.php",
data: { departman_islem: EkleMiGuncelleMi, departman_no: DepartmanNo },
dataType: "html",
cache: false,
success: function (DonenVeri) {
$('[name=departmanlar]').find('option').remove();
$('[name=departmanlar]').html(DonenVeri);
}
}).done(function() {
});
Html Kodlar
<select name="departmanlar" size="15" style="width:180px" Onchange="DepartmanSecim(this)"></select>
Jaquery İle Dinamik Option Oluşturmak
<script>
$(document).ready(function() {
// Şehirler dizisi
var cities = ["İstanbul", "Ankara", "İzmir", "Bursa", "Antalya"];
// Döngü ile her şehir için option oluşturup select'e ekle
$.each(cities, function(index, city) {
$('#cities').append($('<option>', {
value: city, // Option value'su
text: city // Option metni
}));
});
});
</script>
$(document).ready(function() {
// Şehirler dizisi
var cities = ["İstanbul", "Ankara", "İzmir", "Bursa", "Antalya"];
// Döngü ile her şehir için option oluşturup select'e ekle
$.each(cities, function(index, city) {
$('#cities').append($('<option>', {
value: city, // Option value'su
text: city // Option metni
}));
});
});
</script>
Çift Boyutlu Dizi
$Firmalar = $FN->GemiSahipleriListesi($Parametreler);
unset($Dizi);
foreach($Firmalar as $Firma){
$Dizi[]= array($Firma->Id, $Firma->CompanyName);
}
$FirmaOptions = json_encode($Dizi);
echo $FirmaOptions;
unset($Dizi);
foreach($Firmalar as $Firma){
$Dizi[]= array($Firma->Id, $Firma->CompanyName);
}
$FirmaOptions = json_encode($Dizi);
echo $FirmaOptions;
<script type="text/javascript">
<
const Firmalar = {GemiFirmalari};
$(document).ready(function () {
$.each(Firmalar, function(index, Firma) {
$("#Bir, #Iki, #Uc").append($('<option>', {
value: Firma[0], // Option value'su
text: Firma[1] // Option metni
}));
});
});
//>
</script>
<
const Firmalar = {GemiFirmalari};
$(document).ready(function () {
$.each(Firmalar, function(index, Firma) {
$("#Bir, #Iki, #Uc").append($('<option>', {
value: Firma[0], // Option value'su
text: Firma[1] // Option metni
}));
});
});
//>
</script>
Yorumunuzu Ekleyin
