使用Jquery和Ajax的動態依賴選擇框

cenfeng發表於2019-06-25
jQuery

如何使用Jquery，Ajax，PHP和Mysql進行動態相關選擇框。 當在“父”框中進行選擇時，從屬選擇框允許重新整理“子”框列表資料。 在這篇文章中，我給出了“catergory”和“subcategory”之間的資料庫關係示例。 這是非常簡單的jquery程式碼，希望大家喜歡。


資料庫

示例資料庫表。 Data 包含列表框的完整資料， data_parent 的key關係與 Data 包含父子關係。

CREATE TABLE 'data'
(
'id' int primary key auto_increment,
'data' varchar(50),
'weight' int(2),
);

CREATE TABLE `data_parent` 
(
`pid` int(11) primary key auto_increment,
`did` int(11) unique,
`parent` int(11),
Foreign key(did) references data(id)
)


sections_demo.php
包含javascipt和PHP程式碼。 $（“。country”）。change（function（）{}  -  country 是select box的類名。使用 $（this）.val（） 呼叫select box值.PHP程式碼顯示 Data 中的 結果， 其中 weight =' 1'

<script  type=" text/javascript " src=" http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js " > </script>
<script  type=" text/javascript " >
$(document).ready( function ()
{
$(".country").change( function ()
{
var  id=$( this ).val();
var  dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success:  function (html)
{
$(".city").html(html);
} 
});

});

});
</script>
//HTML Code
Country :
<select name="country" class=" country ">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select id,data from data where weight='1'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo '<option value="'.$id.'">'.$data.'</option>';
}  ?>
</select> <br/><br/>

City :
<select name="city" class=" city ">
<option selected="selected">--Select City--</option>
</select>


ajax_city.php
包含PHP程式碼。 顯示 data 和 date_parent 表的結果

<?php
include('db.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select b.id,b.data from data_parent a,data b where b.id=a.did and parent='$id'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69933200/viewspace-2648686/，如需轉載，請註明出處，否則將追究法律責任。

相關文章