Results 1 to 4 of 4

Thread: XJOSS SCRIPT - Membuat ComboBOX Bertingkat PHP

  1. #1
    Moderator sepongi_bob's Avatar
    Join Date
    Nov 2008
    Location
    somewhere
    Posts
    562
    Rep Power
    50

    Default XJOSS SCRIPT - Membuat ComboBOX Bertingkat PHP

    Xjoss Script - Berikut ini ada sedikit tips bagaimana membuat sebuah combobox bertingkat menggunakan ajax...,

    ComboBox bertingkat dalam artian, nilai combobox yang satu dipengaruhi oleh nilai pilihan pada combobox sebelumnya, misalnya:

    - pada combobox pertama dipilih propinsi BALI, nah pada combobox berikutnya akan tampil kota-kota khusus di BALI, misalnya DENPASAR, SINGARAJA dsb.

    - kemudian misalkan lanjut dr hal diatas, dipilih kota DENPASAR, maka pada combobox berikutnya akan muncul alamat-alamat rumah, kantor atau sebagainya khusus area DENPASAR...

    Contoh Gambaranya SBB:
    Spoiler:




    Scriptnya SBB:
    1. Buat file index.php
    Spoiler:

    Code:
    <html>
    <head>
    <title>XJOSS.NET - TUTORIAL BY SEPONGI_BOB</title>
    </head>
    <body>
    <font size="2" face="Verdana, Arial, Helvetica, sans-serif">Propinsi:
    <br>
    <select name="propinsi" onChange="javascript:rubah(this)">
      <option value="BALI">BALI</option>
      <option value="JATIM">JATIM</option>
      <option value="JABAR">JABAR</option>
    </select>
    <br>
    <br>
    Kota:
    <br>
    </font>
    <div id="divkedua"></div>
    <font size="2" face="Verdana, Arial, Helvetica, sans-serif"><br>
    Alamat:
    <br>
    </font>
    <div id="divketiga"></div>
    <font size="2" face="Verdana, Arial, Helvetica, sans-serif"><br>
    <br>
    By XJOSS.NET - EXTREME ZONE</font>
    <!-- ------------------------------------------- -->
    
    <script type='text/javascript'>
    function createRequestObject() {
        var ro;
        var browser = navigator.appName;
        if(browser == "Microsoft Internet Explorer"){
            ro = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            ro = new XMLHttpRequest();
        }
        return ro;
    }
    
    var xmlhttp = createRequestObject();
    
    function rubah(combobox)
    {
        var kode = combobox.value;
        if (!kode) return;
        xmlhttp.open('get', 'ambildata.php?kode='+kode, true);
        xmlhttp.onreadystatechange = function() {
            if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
                 document.getElementById("divkedua").innerHTML = xmlhttp.responseText;
    			 document.getElementById("divketiga").innerHTML = "";
            return false;
        }
        xmlhttp.send(null);         
    }
    
    function rubah2(combobox)
    {
        var kode2 = combobox.value;
        if (!kode2) return;
        xmlhttp.open('get', 'ambildata2.php?kode='+kode2, true);
        xmlhttp.onreadystatechange = function() {
            if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
                 document.getElementById("divketiga").innerHTML = xmlhttp.responseText;
            return false;
        }
        xmlhttp.send(null);         
    }
    
    </script>
    </body>
    </html>


    2. Buat file ambildata.php
    Spoiler:

    Code:
    <?
    $kode = $_GET['kode'];
    
    if ($kode == "BALI")
    {
    ?>
    <select name="kota" onChange="javascript:rubah2(this)">
    <option value="DENPASAR">DENPASAR</option>
    <option value="SINGARAJA">SINGARAJA</option>
    </select>
    
    <?
    }
    else if ($kode == "JATIM")
    {
    ?>	
    <select name="kota" onChange="javascript:rubah2(this)">
    <option value="SURABAYA">SURABAYA</option>
    <option value="SIDOARJO">SIDOARJO</option>
    </select>
    <?
    }
    else if ($kode == "JABAR")
    {
    ?>	
    <select name="kota" onChange="javascript:rubah2(this)">
    <option value="JAKARTA">JAKARTA</option>
    <option value="BOGOR">BOGOR</option>
    </select>
    <?
    }
    ?>






    3. Buat ambildata2.php
    Spoiler:

    Code:
    <?php
    //By XJOSS.NET - EXTREME ZONE
    
    $kode = $_GET['kode'];
    
    if ($kode == "DENPASAR")
    {
    ?>
    <select name="alamat">
    <option value="">XJOSS.NET DENPASAR</option>
    <option value="">TEUKU UMAR</option>
    <option value="">IMAM BONJOL</option>
    </select>
    
    <?
    }
    else if ($kode == "SINGARAJA")
    {
    ?>	
    <select name="alamat">
    <option value="">XJOSS.NET SINGARAJA</option>
    <option value="">A YANI</option>
    <option value="">DIPONEGORO</option>
    </select>
    <?
    }
    else if ($kode == "SURABAYA")
    {
    ?>	
    <select name="alamat">
    <option value="">XJOSS.NET SURABAYA</option>
    <option value="">A YANI</option>
    <option value="">DIPONEGORO</option>
    </select>
    <?
    }
    else if ($kode == "SIDOARJO")
    {
    ?>	
    <select name="alamat">
    <option value="">XJOSS.NET SIDOARJO</option>
    <option value="">A YANI</option>
    <option value="">DIPONEGORO</option>
    </select>
    <?
    }
    else if ($kode == "JAKARTA")
    {
    ?>	
    <select name="alamat">
    <option value="">XJOSS.NET JAKARTA</option>
    <option value="">A YANI</option>
    <option value="">DIPONEGORO</option>
    </select>
    <?
    }
    else if ($kode == "BOGOR")
    {
    ?>	
    <select name="alamat">
    <option value="">XJOSS.NET BOGOR</option>
    <option value="">A YANI</option>
    <option value="">DIPONEGORO</option>
    </select>
    <?
    }
    ?>


    Note: ComboBOX bisa dibuat lebih dari contoh ini, kuncinya pada script berikut
    Spoiler:

    Code:
    function rubah(combobox)
    {
        var kode = combobox.value;
        if (!kode) return;
        xmlhttp.open('get', 'ambildata.php?kode='+kode, true);
        xmlhttp.onreadystatechange = function() {
            if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
                 document.getElementById("divkedua").innerHTML = xmlhttp.responseText;
    			 document.getElementById("divketiga").innerHTML = "";
            return false;
        }
        xmlhttp.send(null);         
    }
    
    dan
    
    <div id="divkedua"></div>
    
    dan
    
    <select name="propinsi" onChange="javascript:rubah(this)">
      <option value="BALI">BALI</option>
      <option value="JATIM">JATIM</option>
      <option value="JABAR">JABAR</option>
    </select>
    Perhatikan pada huruf yang berwarna merah.....
    Last edited by sepongi_bob; 22nd June 2010 at 00:03.

  2. #2
    Moderator & Elite OE Team GlowEyeZ's Avatar
    Join Date
    Feb 2010
    Location
    hell
    Posts
    1,905
    Rep Power
    52

    Default

    wedew...
    nulis kota maa provinsinya manual satu2 yah??
    "piracy save money..."
    This is my life, and what has been achieved today is the result of my hard work during this. Everything on me is my property, my rules. and I don't care what other people say to me. "I'm still a fool who always wanted to know the virtual world"

  3. #3

    Join Date
    Jan 2012
    Posts
    1
    Rep Power
    0

    Default

    Gak jalan bro...
    errornya seperti ini...

    maaf, newbie... udah cari2 tapi gak ketemu...

  4. #4
    Administrator Bandit's Avatar
    Join Date
    Oct 2008
    Location
    where the fun is...
    Posts
    2,229
    Rep Power
    10

    Default

    Quote Originally Posted by sadarta View Post
    Gak jalan bro...
    errornya seperti ini...

    maaf, newbie... udah cari2 tapi gak ketemu...
    kalau gak salah, error spt ini karena kekurangan titik kok ( ; )

    Don't Ask Who Am I, I am still XJOSSer

    jadilah pria pemberani, jangan pernah meneteskan air mata, tetap berjuang


Similar Threads

  1. Extreme PHP Script to Filter User IP
    By Bandit in forum X-Script
    Replies: 0
    Last Post: 23rd June 2010, 10:18
  2. Membuat Menu Search like Facebook
    By sepongi_bob in forum X-Script
    Replies: 2
    Last Post: 15th June 2010, 20:42
  3. Script Keren
    By Alcoholic in forum X-Hack
    Replies: 9
    Last Post: 4th April 2010, 02:14

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •