Read 215 times | Created 2013-07-16 09:42:02 | Updated 2013-07-16 09:50:13 | | |

 

//---- file: combo.php

<?php
/******************************** 
/ CHAINED MULTIPLE COMBOBOX(MAIN)
/ FILENAME     : combo.php 
/ UPDATED BY   : CAHYA DSN 
/ CREATED DATE : 2013-07-16 
/*******************************
--
-- Table structure for table `tbl_kab`
--
DROP TABLE IF EXISTS `tbl_kab`;
CREATE TABLE IF NOT EXISTS `tbl_kab` (
  `id_kab` smallint(6) unsigned NOT NULL AUTO_INCREMENT,
  `id_prov` tinyint(3) unsigned NOT NULL,
  `nama` varchar(50) NOT NULL,
  PRIMARY KEY (`id_kab`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_kab`
--
INSERT INTO `tbl_kab` (`id_kab`, `id_prov`, `nama`) VALUES
(1, 6, 'Kabupaten Administrasi Kepulauan Seribu'),
(2, 6, 'Kota Administrasi Jakarta Barat'),
(3, 6, 'Kota Administrasi Jakarta Pusat'),
(4, 6, 'Kota Administrasi Jakarta Selatan'),
(5, 6, 'Kota Administrasi Jakarta Timur'),
(6, 6, 'Kota Administrasi Jakarta Utara');

-- --------------------------------------------------------
--
-- Table structure for table `tbl_kec`
--
DROP TABLE IF EXISTS `tbl_kec`;
CREATE TABLE IF NOT EXISTS `tbl_kec` (
  `id_kec` mediumint(9) unsigned NOT NULL AUTO_INCREMENT,
  `id_kab` smallint(6) unsigned NOT NULL,
  `nama` varchar(30) NOT NULL,
  PRIMARY KEY (`id_kec`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_kec`
--
INSERT INTO `tbl_kec` (`id_kec`, `id_kab`, `nama`) VALUES
(1, 4, 'Kebayoran Baru'),
(2, 4, 'Kebayoran Lama'),
(3, 4, 'Pesanggrahan'),
(4, 4, 'Cilandak'),
(5, 4, 'Pasar Minggu'),
(6, 4, 'Jagakarsa'),
(7, 4, 'Mampang Prapatan'),
(8, 4, 'Pancoran'),
(9, 4, 'Tebet'),
(10, 4, 'Setiabudi');

-- --------------------------------------------------------
--
-- Table structure for table `tbl_kel`
--
DROP TABLE IF EXISTS `tbl_kel`;
CREATE TABLE IF NOT EXISTS `tbl_kel` (
  `id_kel` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `id_kec` mediumint(9) unsigned NOT NULL,
  `nama` varchar(30) NOT NULL,
  PRIMARY KEY (`id_kel`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_kel`
--
INSERT INTO `tbl_kel` (`id_kel`, `id_kec`, `nama`) VALUES
(1, 1, 'Selong'),
(2, 1, 'Gunung'),
(3, 1, 'Kramat Pela'),
(4, 1, 'Gandaria Utara'),
(5, 1, 'Cipete Utara'),
(6, 1, 'Pulo'),
(7, 1, 'Melawai'),
(8, 1, 'Petogogan'),
(9, 1, 'Rawa Barat'),
(10, 1, 'Senayan'),
(11, 2, 'Grogol Utara'),
(12, 2, 'Grogol Selatan'),
(13, 2, 'Cipulir'),
(14, 2, 'Kebayoran Lama Utara'),
(15, 2, 'Kebayoran Lama Selatan'),
(16, 2, 'Pondok Pinang'),
(17, 3, 'Ulujami'),
(18, 3, 'Petukangan Utara'),
(19, 3, 'Petukangan Selatan'),
(20, 3, 'Pesanggrahan'),
(21, 3, 'Bintaro');

-- --------------------------------------------------------
--
-- Table structure for table `tbl_prov`
--
DROP TABLE IF EXISTS `tbl_prov`;
CREATE TABLE IF NOT EXISTS `tbl_prov` (
  `id_prov` tinyint(3) unsigned NOT NULL AUTO_INCREMENT,
  `nama` varchar(30) NOT NULL,
  PRIMARY KEY (`id_prov`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_prov`
--
INSERT INTO `tbl_prov` (`id_prov`, `nama`) VALUES
(1, 'Aceh'),
(2, 'Bali'),
(3, 'Banten'),
(4, 'Bengkulu'),
(5, 'Gorontalo'),
(6, 'Jakarta'),
(7, 'Jambi'),
(8, 'Jawa Barat'),
(9, 'Jawa Tengah'),
(10, 'Jawa Timur'),
(11, 'Kalimantan Barat'),
(12, 'Kalimantan Selatan'),
(13, 'Kalimantan Tengah'),
(14, 'Kalimantan Timur'),
(15, 'Kalimantan Utara'),
(16, 'Kepulauan Bangka Belitung'),
(17, 'Kepulauan Riau'),
(18, 'Lampung'),
(19, 'Maluku'),
(20, 'Maluku Utara'),
(21, 'Nusa Tenggara Barat'),
(22, 'Nusa Tenggara Timur'),
(23, 'Papua'),
(24, 'Papua Barat'),
(25, 'Riau'),
(26, 'Sulawesi Barat'),
(27, 'Sulawesi Selatan'),
(28, 'Sulawesi Tengah'),
(29, 'Sulawesi Tenggara'),
(30, 'Sulawesi Utara'),
(31, 'Sumatera Barat'),
(32, 'Sumatera Selatan'),
(33, 'Sumatera Utara'),
(34, 'Yogyakarta');
-- -----------------------------------------
*/
<!DOCTYPE html>
<html>
<head>
  <title>Multiple Chained ComboBox</title>
  <style>
    * {font-family:verdana,arial,sans-serif;font-size:12px;}
    fieldset {width:450px;}
    legend {font-weight:bold;color:#000;}
    label {width:150px;height:20px;display:block;float:left;}
    select {background-color:#ffc;border:solid 1px #999;}
  </style>
</head>
<body>
  <fieldset>
    <legend>Pilihan Tempat</legend>
    <div>
      <label>Provinsi</label>
      <select name="cb_level1" id="cb_level1">
        <option>--pilih salah satu --</option>
        <?php
        $dbhost='localhost';
        $dbuser='root';
        $dbpass='';
        $dbname='test';
        $db=new mysqli($dbhost,$dbuser,$dbpass,$dbname);
        if($result=$db->query('SELECT * FROM tbl_prov'))
        {
          while($row=$result->fetch_object())
          {
            echo "<option value='{$row->id_prov}'>{$row->nama}</option>n";
          }
        }
        ?>
      </select>
    </div>
    <div>
      <label>Kabupaten/Kota</label>
      <select name="cb_level2" id="cb_level2">
        <option>--pilih salah satu --</option>
      </select>
    </div>
    <div>
      <label>Kecamatan</label>
      <select name="cb_level3" id="cb_level3">
        <option>--pilih salah satu --</option>
      </select>
    </div>
    <div>
      <label>Kelurahan/Desa</label>
      <select name="cb_level4" id="cb_level4">
        <option>--pilih salah satu --</option>
      </select>
    </div>
  </fieldset>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script>
    $(document).ready(function(){
      var orig='<option>--pilih salah satu --</option>n';
      $('#cb_level1').change(function(){
        $.post("select.php",{id:$(this).val(),table:'tbl_kab',field:'id_prov'},function(data){
          $('#cb_level2').html(data);
          $('#cb_level3').html(orig);
          $('#cb_level4').html(orig);
        });
      });
      $('#cb_level2').change(function(){
        $.post("select.php",{id:$(this).val(),table:'tbl_kec',field:'id_kab'},function(data){
          $('#cb_level3').html(data);
          $('#cb_level4').html(orig);
        });
      });
      $('#cb_level3').change(function(){
        $.post("select.php",{id:$(this).val(),table:'tbl_kel',field:'id_kec'},function(data){
          $('#cb_level4').html(data);
        });
      });
    });
  </script>
</body>
</html>

//---- file: select.php

<?php
/******************************** 
/ CHAINED MULTIPLE COMBOBOX(AJAX CALL)
/ FILENAME     : select.php 
/ UPDATED BY   : CAHYA DSN 
/ CREATED DATE : 2013-07-16 
/*******************************/
?>
<option>-- pilih salah satu--</option>
<?php
$dbhost='localhost';
$dbuser='root';
$dbpass='';
$dbname='test';
$db=new mysqli($dbhost,$dbuser,$dbpass,$dbname);
$sql="SELECT * FROM {$_POST['table']} WHERE {$_POST['field']}='{$_POST['id']}'";
if($result=$db->query($sql))
{
  while($row=$result->fetch_array())
  {
    echo "<option value='{$row[0]}'>{$row['nama']}</option>n";
  }
}
?>