Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Yazılım Geliştirme
  • PHP / CGI
  • Bu Konuda
Şimdi Ara

PHP to HTML - Dinamik ComboBox / Açılır Menü (İl-İlçe-Semt) Yardım..

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
2 Misafir - 2 Masaüstü
5 sn
6
Cevap
0
Favori
6.079
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • Arkadaşlar merhaba. HTML Site için yaptığım bir bölümde takıldım. Yardımcı olabilir misiniz?

    PHP to HTML - Dinamik ComboBox / Açılır Menü (İl-İlçe-Semt) Yardım..


    Bu şekilde PHP'de yapılmış olan bir ComboBox (Select-Option) menüsünü HTML'de JS veya farklı bir şekilde yapmak istiyorum.

    Çok basit bir sistem. Sadece <Select> <Option> yani ComboBox yapısını kullanarak 5 - 6 tane seçenek çıkmasını istiyorum. Son seçimden sonra devam butonuna tıklanıldığında baştan sona kadar seçilmiş ve sonuncu comboBox'takine göre ilgili bir sayfaya gitmesi gerekiyor.

    Yani basit anlamda anlatmam gerekirse: Bir yere kayıt olurken karşımıza çıkan İl Seçimi Açılır Menüden Seçince İlçe Seçimi o bölümden de seçince Semt Seçimi gibi alt alta seçilen değere göre diğerini açma.

    Örn:


    PHP to HTML - Dinamik ComboBox / Açılır Menü (İl-İlçe-Semt) Yardım..


    Bu şekilde 2 tane HTML-JS kodum mevcut. Fakat 2. menüden sonra JS bilgim pek olmadığı için devam edemedim. Bu menüden 5 - 10 tane olacak bir önceki menüde seçilene göre diğer combobox taki değerler çıkacak. Olay bu kadar. PHP'de birden fazla var fakat ben HTML kullandığım için HTML gerekmekte.

    Yardım edebilecek arkadaş için aşağıda elimde olan 3 çeşit farklı kodu da veriyorum.

    Buraya kadar eklediğim 3 farklı kodlar.. İster bunlardan birinden devam edilebilir. İstenirse farklı bir kod olabilir.

    [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Başlıksız Belge</title>


    <script>
    function byId(e) {return document.getElementById(e);}

    function stateComboChange()
    {
    var combo1 = byId('stateCombo');
    var combo2 = byId('cityCombo');
    // alert(combo1.value);

    emptyCombo(combo2);
    switch(combo1.value)
    {
    case '-1': addOption(combo2, -1, '- Şehir Seçiniz -');
    break;
    case '0': addOption(combo2, 0, 'İstanbul');
    addOption(combo2, 1, 'Edirne');
    addOption(combo2, 2, 'Tekirdağ');
    addOption(combo2, 3, 'Lüleburgaz');
    break;
    case '1': addOption(combo2, 0, 'Trabzon');
    addOption(combo2, 1, 'Rize');
    addOption(combo2, 2, 'Samsun');
    break;
    case '2': addOption(combo2, 0, 'İzmir');
    addOption(combo2, 1, 'Aydın');
    break;
    case '3': addOption(combo2, 0, 'Vd');
    addOption(combo2, 1, 'CC');
    break;
    }
    cityComboChange();
    }

    function cityComboChange()
    {
    var combo2, tgt;
    combo2 = byId('cityCombo');
    tgt = byId('tgt');

    tgt.innerHTML = combo2.options[combo2.options.selectedIndex].title;
    }

    function emptyCombo(e)
    {
    e.innerHTML = '';
    }

    function addOption(combo, val, txt)
    {
    var option = document.createElement('option');
    option.value = val;
    option.title = txt;
    option.appendChild(document.createTextNode(txt));
    combo.appendChild(option);
    }

    </script>
    </head>

    <body>


    <select id='stateCombo' onchange='stateComboChange();'>
    <option value='-1' title='-select one-'>-Bölge Seçiniz..-</option>
    <option value='0' title='Vic'>Marmara Bölgesi</option>
    <option value='1' title='Nsw'>Karadeniz Bölgesi</option>
    <option value='2' title='Tas'>Ege Bölgesi</option>
    <option value='3' title='Tas'>EEEVi</option>
    </select>

    <select id='cityCombo' onchange='cityComboChange();'>
    <option value='-1' title='-select state first-'>-Önce Bölge Seçiniz-</option>
    </select>

    <div id='tgt'></div>


    </body>
    </html>
    [/CODE]

    -----------------------------------------------

    [CODE]
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
    <title>Dynamic Select Statements</title>
    <script type="text/javascript">

    var countryLists = new Array(4)
    countryLists["empty"] = ["Bölge Seçin"];
    countryLists["Marmara Bölgesi"] = ["İstanbul", "Edirne", "Tekirdağ"];
    countryLists["Ege Bölgesi"] = ["Çanakkale", "İzmir", "Aydın"];
    countryLists["Karadeniz Bölgesi"] = ["Trabzon", "Ordu", "Rize","Sinop"];

    function countryChange(selectObj) {
    var idx = selectObj.selectedIndex;
    var which = selectObj.options[idx].value;
    cList = countryLists[which];
    var cSelect = document.getElementById("country");
    var len=cSelect.options.length;
    while (cSelect.options.length > 0) {
    cSelect.remove(0);
    }
    var newOption;
    for (var i=0; i<cList.length; i++) {
    newOption = document.createElement("option");
    newOption.value = cList;
    newOption.text=cList;
    try {
    cSelect.add(newOption);
    }
    catch (e) {
    cSelect.appendChild(newOption);
    }
    }
    }
    //]]>
    </script>
    </head>

    <body>

    <h1></h1>
    <label for="continent">Seç</label>
    <select id="continent" onchange="countryChange(this);">
    <option value="empty">Bölge Seçin</option>
    <option value="Marmara Bölgesi">Marmara Bölgesi</option>
    <option value="Ege Bölgesi">Ege Bölgesi</option>
    <option value="Karadeniz Bölgesi" >Karadeniz Bölgesi</option>
    </select>
    <br/>
    <label for="country">Seçin</label>
    <select id="country">
    <option value="0">Şehir Seçin</option>
    </select>



    </body>
    </html>[/CODE]


    --------------------------------------------------


    [CODE]<htmL>
    <title>
    </title>



    <body>
    <script type="text/javascript">


    function configureDropDownLists(county,city) {
    var Davidson = new Array('', 'Antioch', 'Nashville');
    var Rutherford = new Array('', 'Smyrna', 'LaVergne');

    switch (county.value) {
    case 'Davidson':
    document.getElementById(city).options.length = 0;
    for (i = 0; i < Davidson.length; i++) {
    createOption(document.getElementById(city), Davidson, Davidson);
    }
    break;
    case 'Rutherford':
    document.getElementById(city).options.length = 0;
    for (i = 0; i < Rutherford.length; i++) {
    createOption(document.getElementById(city), Rutherford, Rutherford);
    }
    break;
    }

    }

    function createOption(county, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    county.options.add(opt);
    }
    </script>
    <tr>
    <td>County Name: </td>
    <td><select id="county" onchange="configureDropDownLists(this,'city');">
    <option value=""></option>
    <option value="Davidson">Davidson</option>
    <option value="Rutherford">Rutherford</option>
    </select></td>
    </tr><br>
    <tr>
    <td>City: </td>
    <td><select id="city">
    </select></td>
    </tr>


    </body>
    </html>[/CODE]



    < Bu mesaj bu kişi tarafından değiştirildi Guest-074E5CC16 -- 11 Mayıs 2015; 11:22:52 >







  • Hazırları mevcut, Chained Select diye geçiyor. Hatta bu işi database den yapanı da var onlarıda deneyebilirsin hali hazırda dağıtılan kodlar mevcut sadece DB bağlantını yapıyorsun ve çalışmaya başlıyor.

    örnek olarak.
    http://www.serpito.com/php-ajax-chained-select-il-ilce-secimi/

    EDIT => İndirme linki :https://app.box.com/s/offguc4p56p17r00qtng



    < Bu mesaj bu kişi tarafından değiştirildi ecarpar -- 11 Mayıs 2015; 13:50:12 >




  • Evet bu konuda bir çok hali hazırda kodlar mevcut bende onları bulabildim. Fakat ben bu sistemi HTML sitede yapmak istiyorum. Ama bu sitede ve diğerlerinde denk geldiğim ise hepsi PHP şeklinde olduğu için sıkıntı olabiliyor.

    O yüzden orya bir kaç tane de kod koydum ekstra bir durumda yapılabilir mi diye. Yoksa PHP olarak benimde bulduğum hazır kod'lar mevcuttur.
  • sen bunu sadece jquery ve html kullanarak mı yapmayı düşünüyorsun ? Yani Php vb.. bir dil kullanmadan.
    bu durumda.

    http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm de örnek mevcut kullanabilirsin yada daha üniversal olarak

    https://plugins.jquery.com/chained/ bunu tavsiye ederim daha iyidir, örnek vb daha kolay bulursun.



    < Bu mesaj bu kişi tarafından değiştirildi ecarpar -- 11 Mayıs 2015; 17:59:48 >




  • Evet. Sadece JQuery ve Html kullanıcam. Asp, Php vb kullanmak istemiyorum. Çünkü kendi yaptığım site html tabanlı.

    Vermiş olduğunuz linklere de pc başında iken bakıcam. Şimdiden teşekkür ederim.

    Alternatif olarak herhalde bir Php sayfasında içindeki belirli Php kodları silerek de Html tabanlı olarak yapabiliyoruz galiba. Ama öyle olunca da Sql bağlantısı olmayacak gibi geliyor bana.
    @ecarpar

    < Bu ileti mobil sürüm kullanılarak atıldı >
  • Eğer php ve database bağlantılı ise elindeki örnek aslında doğrudan çalıştırıp HTML çıktısını (browser den) farklı kaydedip düzenleyerek te kullanabilirsin, kur çalıştır, sayfayı farklı kaydet zaten sana HTML çıktısını vermiş olacak. Hatta kolay olması için elindeki örnekte bulunan gereksiz herşeyi silip php versiyonunu kendi sitene göre düzenleyip farklı kaydetle çalışır haldeki dosyanı alabilirsin.. En nihayetinde PHP database e de bağlansa son kullanıcıya HTML veriyoruz ..

    şimdi diycemki jquery ile yazılmış kısımları otur oku ne tür veri istiyor PHP yardımıyla DB den çekilen verileri elle oluştur ama o çok zorlar gereksiz uğraş insanı delirtir.
    • Yapay Zeka’dan İlgili Konular
    PHP Local'de Çalışıyor Hosting'de Çalışmıyor
    5 yıl önce açıldı
    Active Directory Domain internet'e çıkmıyor?
    19 yıl önce açıldı
    active directory dizin hizmetleri şuanda kullanılamaz [Çözüldü]
    11 yıl önce açıldı
    Daha Fazla Göster
    
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz, DH'yi kullanırken depoladığımız çerezlerle ilgili veri politikamıza gözatın.
Kabul Ediyorum