JQuery ile Marka Model

 bcakir
 14 Ocak 2012

Merhaba arkadaşlar, bu uygulamamızda klasik olarak her sitede görebileceğiniz il-ilçe uygulamasının araba marka ve modelleri versiyonunu yapacağız. Selectbox kutusundan araba markası seçince, bu markaya yönelik modelleri göreceğiz sadece. Uygulamamızda 2 tane selectbox kullanacağız. Birinci selectboxtan girilen değere göre ikincisinin değerleri değişecek. Uygulamamızı JQuery ile geliştireceğiz, bu bize Php betiğinden modelleri almamızda kolaylık sağlayacak. Uygulamada veritabanı kullanmayacağım ama siz veritabanını kolayca, daha önce anlattığım veritabanına bağlanma konusundan yararlanarak uygulamaya ekleyebilirsiniz.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<title>JQuery ile Marka Model</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //selectbox değişince çalıştır
    $("#marka").change(function(){
        modelleri_al();
    });
});

function modelleri_al(){
    //markanın alınması
    marka=$("#marka").val();
    //seçilem markanın göndermesi
    $.ajax({
        type:'POST',
        url:'veri.php',
        data:'marka='+marka,
        success: function(msg){
            //dönen modelleri gösterme
            $('#modeli').html(msg);
        }
    });
}
</script>
<style>
select {width: 150px}
#markasi {display: inline}
#modeli {display: inline-block}
</style>
</head>
<body>
<div id="markasi">
<select id="marka" title="Markayı Seçiniz">
<option value="fiat">Fiat</option>
<option value="wolksvagen">Wolksvagen</option>
<option value="seat">Seat</option>
</select></div>
<div id="modeli"></div>
</body>
</html>

Yukarıda, uygulamamızın seçme kutularını ve seçilen değerin Php sayfasına gönderilme işlemini yaptık. Şimdi de modelleri aldığımız veri.php betiğimizi geliştirelim.

<?php
//veri.php olarak kaydedin
header("Content-Type: text/html; charset=iso-8859-9");
echo "<select id='model' title='Modeli Seçiniz'>";
if($_POST['marka']=='wolksvagen'){
?>
	<option value="jetta">Jetta</option>
	<option value="golf">Golf</option>
	<option value="passat">Passat</option>
	<option value="polo">Polo</option>
<?php }elseif($_POST['marka']=='seat'){ ?>
	<option value="cordoba">Cordoba</option>
	<option value="ibiza">İbiza</option>
	<option value="leon">Leon</option>
<?php }elseif($_POST['marka']=='fiat'){ ?>
	<option value="albea">Albea</option>
	<option value="doblo">Doblo</option>
	<option value="linea">Linea</option>
	<option value="punto">Punto</option>
<?php
}
echo "</select>";
?>

Modellerimizi elle girdiğimiz için veritabanı kullanmadık ama siz veritabanından bu değerleri alıp, döngü içerisinde bir kaç satır kodla araba modellerini geriye döndürebilirsiniz. Uygulamamıza veritabanı bağlama işlemini anlatarak son vermiş oluyorum. Eğer selectboxa link vermek istiyorsanız da aşağıdaki kodu kullanabilirsiniz. Yararlı olması dileğiyle.

<select onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
<option value="http://bcakir.com">bcakir</option>
<option value="http://www.google.com">google</option>
</select>
 3.356 Okunma

Bu yazıya 25 yorum yapılmış.

  1. Teşekkür ederim, il-ilçe uygulamasını arıyordum 😀

  2. Hocam buna bir alan daha eklesek, nasıl ekleyebiliriz? Parça alanı eklemek istiyordum da ben. Bir tane daha veri.php dosyası oluşturdum ama sanırsam javascript kodlarındanmıdır nedir çalıştıramadım.

    • Aslında istediğiniz basit fakat uygulama örneğini göstermeden bir kaç satırla ne yapmanız gerektiğini anlatmam çok zor. Bununla alakalı yazı yazmaya çalışırım müsait olunca.

  3. Hocam bana acil böle bişey lazımdı ya gerçekten yardımcı olursanız çok makbule geçer yani. Bunun neresini değiştirecez, bana tarif etseydiniz ben yapmaya çalışırdım.

    • document.ready fonksiyonunun kendisi hariç (içindekini çoğaltacaksın ama) her şeyi çoğalt ve isimlerini düzelt. Aynı isimden 2 tane id değeri olamaz. Bir tanede parca.php sayfası yap ve ona veriyi gönder ve al.

  4. 2.kutucuğa çekilen yazıları urlli olark nasıl gösterecez.Marka yı seçince açılan model kutusunun içindeki yazılar linkli olacak tıklayınca bieyerlere gidecek

    • Yorum bölümünde kodlar tam çıkmadığı için yazıya ekleme yapıyorum.

  5. aynı kod banada lazım mail adresime yollayabilirmisiniz rica etsem

    • Bu yazının son kısmında yer alan kodlar, selectboxtan yönlendirme işlemi yapıyor. Yazının son kısmından kolayca alabilirsiniz.

  6. Selam. Bence uygulamalarınıza örnek veya demo gibi birşey yapmalısınız. Böyle çok daha güzel olur

    • Yorumun için teşekkür ederim, bunu Facebook uygulamalarım için yapacaktım. Zaman bulunca hepsini kapsar şekilde de yapabilirim.

  7. gösterdiklerinizin aynısını yaptım deneme.php de en üsttekileri yazdım içine deneme.php de form oluşturdum action ı deneme.php olan veri.php den verileri çekiyor formda çalışıyor orda bir sıkıntı yok kendi scriptmda aynısını yaptğmda modeli boş olarak gösteriyor marka modeli veritabanından çekiyor

  8. başka sayfada denedim veritabanından çekiyorum oluyor kategori ekleme sayfama geçirince eklemiyor çalışan şey ne varsa boş dönderiyor deliricem artık

  9. hocam tam aradığım bi konuydu fakat bunun sonucunda arama yapmam gerekiyo veritabanından yani seçileni veritabanından arayacak onun için seçilen değerini nasıl alabilrim bu konuda yardımcı olursnız çok sevinirim..

    • Her bir modelin hangi markaya ait olduğu ile ilgili bir stün olmalı veritabanında. Sorgunu o sütüna göre yapıp uygun olanları getireceksin.

  10. hocam onu yaptımda bunu sektör alt sektör ve il semt olark yptm ama hepsini tek butonla post etmm lazm ama formlar ayrı sayfalarda oldğu için sadece birisini alıyor nasıl yapabilrim öyle birşey mümkünmü acaba?

    • Butona tıklayınca; bütün formları kontrol edip, değerleri alıp, gönderme yapma yoluna gitmelisin.

  11. Merhaba,
    asp olarak versiyon lazım. .mdb dosyasından veri çekmeye çalışıyorum. bir türlü yapamadım. Bazı sitelerde bişeyler var ama bir türlü çalıştıramadım. Çalışan script için, Download linki yok mu

    • Maalesef bu sitede asp ile ilgili kaynak yok.

  12. ben bu kodları bir form sayfasında kullanmak için uyarladım uygulama çalışıyor mantıkta hiç bir sorun yok ama ben bu formu post ettiğimde içindeki select de veri boş gidiyor, sayfa kaynağına baktığımda bu veriler gözükmüyor ama frebug da görebiliyorum bu verileri nasıl post edeceğiz saygılar.

    • İçi doluysa selectbox boş gitmez, sayfa yenilendiği için selectbox ilk haline dönüyordur. Eğer seçileni aktif etmek istiyorsan da selectboxın selected özelliğini kullanman gerekir.

  13. çok faydalı bir yazı oldu Allah razı olsun bir sorum olacak sadece
    bunu menüye link eklemede kullanıyorum kategoriye ya da içeriğe link vermek için ama bir seçenek daha ekleyip harici bir url eklemek istersek nasıl bir düzenleme yapmamız lazım

  14. hocam link vermeyi göstermişsiniz ama ben şunu istiyorum fiat’ı seçince modeller sıralanıyorya mesela lineayı seçince vereceğim linke gitsin lineaya nasıl lınk vereceğim?

    • Uygulamada iki farklı fonksiyon yazman gerekir. Linklere farklı class isimleri atayıp hangi class seçilmişse o fonksiyonun işlemini yaptırırsın (linke gitme ya da listeleme gibi).

  15. Markayı selected yaptığımızda, model de otomatik gelebilir mi? yani mouse ile işlem yapmadan veri tabanından selected bir marka getirince model de ajax’tan çekilebilir mi?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery, Php
Kapat