Mengisi dropdown pilihan lain dari database berdasarkan pilihan dropdown
Saya sedang membangun sebuah situs web untuk belajar pengkodean dan mencoba membuat alat di mana pengguna mengklik pilihan/dropdown yang berisi beberapa nama kategori yang diambil dari basis data cat dan kemudian pilihan lain akan muncul dengan nama subkategori yang diambil dari basis data subcat. Hal ini hampir sama persis dengan Yelp (turun ke kategori) seperti Yelp (turun ke kategori).
Saya juga membuat diagram:
Saya sudah memiliki dropdown kategori yang diambil dari basis data cat:
<p><b>Category:</b><br />
<?php
$query="SELECT id,cat FROM cat";
$result = mysql_query ($query);
echo"<select name='cselect3' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>";
}
echo"</select>";
?>Dan saya memiliki subkategori yang diambil dari basis data subkategori:
<p><b>Subcat1:</b><br />
<?php
$query="SELECT id,subcat FROM subcat";
$result = mysql_query ($query);
echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";
}
echo"</select>";
?>Bagaimana cara membuat dropdown subkategori berdasarkan kategori yang diklik pengguna dan membuatnya muncul secara otomatis? Terima kasih banyak atas segala bantuannya!
Karena data pada drop down Sub-Kategori Anda bergantung pada apa yang dipilih pada kategori tersebut, Anda mungkin ingin menggunakan ajax. Anda dapat mengatur pendengar acara pada drop down kategori Anda dan ketika berubah, Anda dapat meminta data untuk drop down subkategori dan mengisinya, ada banyak cara untuk melakukannya, di bawah ini adalah salah satu opsi (menggunakan jquery) untuk membantu Anda memulai.
// warning sub optimal jquery code
$(function(){
// listen to events on the category dropdown
$('#cat').change(function(){
// don't do anything if use selects "Select Cat"
if($(this).val() !== "Select Cat") {
// subcat.php would return the list of option elements
// based on the category provided, if you have spaces in
// your values you will need to escape the values
$.get('subcat.php?cat='+ $(this).val(), function(result){
$('#subcat').html(result);
});
}
});
});
Jika Anda menggunakan AJAX, Anda akan ingin agar kode kedua tersebut menjadi file php terpisah yang akan Anda panggil melalui AJAX. pada callback dari panggilan AJAX, lakukan saja (kode semu): someContainingDivOrSomething.innerHtml = responseBody;.
Perhatikan bahwa pada umumnya adalah ide yang buruk untuk melakukan query dalam file tampilan PHP Anda secara langsung (pemisahan masalah). Ada beberapa hal lain yang dapat ditingkatkan. Namun, ini akan membantu Anda memulai.
buat struktur html ini di halaman arahan
<p><b>Category:</b><br />
<?php
$query="SELECT id,cat FROM cat";
$result = mysql_query ($query);
echo"<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>";
}
echo"</select>";
?>
<div id='sub_categories'></div>membuat fungsi js yang ditugaskan ke menu tarik-turun kategori
function loadSubCats(value)
{
$.post('load_sub_cats.php',{catid : value},function{data}
{
$('#sub_categories').html(data);
});
}sekarang di dalam load_sub_cats.php Anda
<p><b>Subcat1:</b><br />
<?php
$catid = $_POST['cat_id']
$query="SELECT id,subcat FROM subcat where catid = $catid";
$result = mysql_query ($query);
echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";
}
echo"</select>";
?>Anda harus menyertakan jquery agar kode ini dapat bekerja.
