- Beranda
- Programmer Forum
[tanya] Cara Mengambil isi data Combobox Chaining dari database
...
TS
nextkira
[tanya] Cara Mengambil isi data Combobox Chaining dari database
Selamat pagi gan,
saya lg bikin web & butuh bantuan script untuk mengambil data combobox dari database, data yang diambil adalah negara, kota, objek wisata & hotel yang kesemuanya saling berkaitan (Chaining combobox) jadi ketika kita pilih negara, combobox hanya akan menampilkan kota di negara tsb, ketika memilih kota, objek hanya akan menampilkan objek yg ada di kota yg dipilih dst. (saat ini data masih saya tulis di scriptnya lsng jadi untuk menambahkan mesti bongkar script)
Script nya ada dibawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Susun paket wisata</title>
<link rel="stylesheet" type="text/css" href="../styles.css" />
<style type="text/css">
#sidebar {
width: 0px;
}
body {
font-family:Arial, Helvetica, sans-serif;
}
#content {
width: 770px;
}
#button, #button-remote {
display: none;
}
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter
rogid
XImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
background-color:#ffc477;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #cc9f52;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
filterrogidXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
background-color:#fb9e25;
}.classname:active {
position:relative;
top:1px;
}
.styled-select select {
background: transparent;
width: 120px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
td {
font-weight:bold;
}
</style>
[removed][removed]
[removed][removed]
[removed][removed]
[removed]
$(function() {
/* For jquery.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#model");
$("#kota").chained("#negara");
$("#objek").chained("#kota");
$("#hotel").chained("#objek");
/* Show button after each pulldown has a value. */
$("#engine").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
$("#button").fadeIn();
} else {
$("#button").hide();
}
});
$("#c").chained("#a,#b");
/* For jquery.chained.remote.js */
$("#series-remote").remoteChained("#mark-remote", "json.php");
$("#model-remote").remoteChained("#series-remote", "json.php");
$("#engine-remote").remoteChained("#series-remote, #model-remote", "json.php");
/* Show button after each pulldown has a value. */
$("#engine-remote").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model-remote")).val()) {
$("#button-remote").fadeIn();
} else {
$("#button-remote").hide();
}
});
$("#c-remote").remoteChained("#a-remote,#b-remote", "json.php");
});
[removed]
[removed][removed]
[removed]
_uacct = "UA-190966-1";
urchinTracker();
[removed]
</head>
<body><form method="post" action="">
<table width="532" border="0">
<tr>
<td width="125">Negara</td>
<td width="10">:</td>
<td width="383">
<div class="styled-select">
<select id="negara" name="negara">
<option value="">--</option>
<option value="domestic">Domestic</option>
<option value="international">International</option>
</select></div>
<tr>
<td>Kota</td>
<td>:</td>
<td>
<div class="styled-select">
<select id="kota" name="kota">
<option value="">--</option>
<option value="jogja" class="domestic">Jogja</option>
<option value="solo" class="domestic">Solo</option>
<option value="malaysia" class="international">Malaysia</option>
<option value="malaysia" class="international">Singapura</option>
</select></div>
</td>
</tr>
<tr>
<td>Objek Wisata </td>
<td>:</td>
<td>
<div class="styled-select">
<select id="objek" name="objek">
<option value="">--</option>
<option value="prambanan" class="jogja">Prambanan</option>
<option value="klewer" class="solo">Klewer</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Hotel</td>
<td>:</td>
<td>
<div class="styled-select">
<select id="hotel" name="hotel">
<option value="">--</option>
<option value="hotel1" class="prambanan">Hotel 1</option>
<option value="hotel2" class="klewer">Hotel 2</option>
</select></div>
<!-- <button id="button" type="submit">Button</button> -->
</td>
</tr>
<tr>
<td>Transport</td>
<td>:</td>
<td><div class="styled-select">
<select id="transport" name="transport">
<option value="">--</option>
<option value="avanza">Avanza</option>
<option value="xenia">Xenia</option>
</select></div>
</td>
</tr>
<tr>
<td>Dewasa</td>
<td>:</td>
<td><div class="styled-select">
<select id="dewasa" name="jmldewasa">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
</select></div>
</td>
</tr>
<tr>
<td>Anak</td>
<td>:</td>
<td><div class="styled-select">
<select id="anak" name="jmlanak">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
</select></div>
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td><input type="submit" class="classname" name="kirim" id="kirim" value="kirim" /></td>
</tr>
</table>
</form>
</body>
</html>
Javascriptnya bisa didownload disini :
http://www.mediafire.com/?1yal235bsve7fgf
saya lg bikin web & butuh bantuan script untuk mengambil data combobox dari database, data yang diambil adalah negara, kota, objek wisata & hotel yang kesemuanya saling berkaitan (Chaining combobox) jadi ketika kita pilih negara, combobox hanya akan menampilkan kota di negara tsb, ketika memilih kota, objek hanya akan menampilkan objek yg ada di kota yg dipilih dst. (saat ini data masih saya tulis di scriptnya lsng jadi untuk menambahkan mesti bongkar script)
Script nya ada dibawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Susun paket wisata</title>
<link rel="stylesheet" type="text/css" href="../styles.css" />
<style type="text/css">
#sidebar {
width: 0px;
}
body {
font-family:Arial, Helvetica, sans-serif;
}
#content {
width: 770px;
}
#button, #button-remote {
display: none;
}
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter
rogidXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');background-color:#ffc477;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #cc9f52;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
filter
rogidXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');background-color:#fb9e25;
}.classname:active {
position:relative;
top:1px;
}
.styled-select select {
background: transparent;
width: 120px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
td {
font-weight:bold;
}
</style>
[removed][removed]
[removed][removed]
[removed][removed]
[removed]
$(function() {
/* For jquery.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#model");
$("#kota").chained("#negara");
$("#objek").chained("#kota");
$("#hotel").chained("#objek");
/* Show button after each pulldown has a value. */
$("#engine").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
$("#button").fadeIn();
} else {
$("#button").hide();
}
});
$("#c").chained("#a,#b");
/* For jquery.chained.remote.js */
$("#series-remote").remoteChained("#mark-remote", "json.php");
$("#model-remote").remoteChained("#series-remote", "json.php");
$("#engine-remote").remoteChained("#series-remote, #model-remote", "json.php");
/* Show button after each pulldown has a value. */
$("#engine-remote").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model-remote")).val()) {
$("#button-remote").fadeIn();
} else {
$("#button-remote").hide();
}
});
$("#c-remote").remoteChained("#a-remote,#b-remote", "json.php");
});
[removed]
[removed][removed]
[removed]
_uacct = "UA-190966-1";
urchinTracker();
[removed]
</head>
<body><form method="post" action="">
<table width="532" border="0">
<tr>
<td width="125">Negara</td>
<td width="10">:</td>
<td width="383">
<div class="styled-select">
<select id="negara" name="negara">
<option value="">--</option>
<option value="domestic">Domestic</option>
<option value="international">International</option>
</select></div>
<tr>
<td>Kota</td>
<td>:</td>
<td>
<div class="styled-select">
<select id="kota" name="kota">
<option value="">--</option>
<option value="jogja" class="domestic">Jogja</option>
<option value="solo" class="domestic">Solo</option>
<option value="malaysia" class="international">Malaysia</option>
<option value="malaysia" class="international">Singapura</option>
</select></div>
</td>
</tr>
<tr>
<td>Objek Wisata </td>
<td>:</td>
<td>
<div class="styled-select">
<select id="objek" name="objek">
<option value="">--</option>
<option value="prambanan" class="jogja">Prambanan</option>
<option value="klewer" class="solo">Klewer</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Hotel</td>
<td>:</td>
<td>
<div class="styled-select">
<select id="hotel" name="hotel">
<option value="">--</option>
<option value="hotel1" class="prambanan">Hotel 1</option>
<option value="hotel2" class="klewer">Hotel 2</option>
</select></div>
<!-- <button id="button" type="submit">Button</button> -->
</td>
</tr>
<tr>
<td>Transport</td>
<td>:</td>
<td><div class="styled-select">
<select id="transport" name="transport">
<option value="">--</option>
<option value="avanza">Avanza</option>
<option value="xenia">Xenia</option>
</select></div>
</td>
</tr>
<tr>
<td>Dewasa</td>
<td>:</td>
<td><div class="styled-select">
<select id="dewasa" name="jmldewasa">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
</select></div>
</td>
</tr>
<tr>
<td>Anak</td>
<td>:</td>
<td><div class="styled-select">
<select id="anak" name="jmlanak">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
</select></div>
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td><input type="submit" class="classname" name="kirim" id="kirim" value="kirim" /></td>
</tr>
</table>
</form>
</body>
</html>
Javascriptnya bisa didownload disini :
http://www.mediafire.com/?1yal235bsve7fgf
0
4.3K
7
Komentar yang asik ya
Mari bergabung, dapatkan informasi dan teman baru!
Programmer Forum
20.2KThread•5KAnggota
Urutkan
Terlama
Komentar yang asik ya