لجعل قائمتين منسدلتين مترابطتين ببعض يجب عليك استخدام php و ajax و jquery كالاتي :
جدول قاعدة البيانات (cat):
id => المعرّف
name => اسم التصنيف / التصنيف الفرعي
parent_id => لنقوم بربطه بالتصنيف الأب (خاص بالتصنيفات الفرعية / قيمته الافتراضية NULL)
ملف الإتصال (config.php):
$pdo = new PDO('mysql:host=localhost;dbname=cat', 'username_here', 'password_here');
//Don't forget to change 'username_here' and 'password_here'
ملف الوظائف (func.php):
<?php
require_once('config.php');
public function get_cat(){
global $pdo;
$val = NULL;
$stmt = $pdo->prepare("select * from addresses where parent_id =:parent_id");
$stmt->bindParam(':parent_id', $val, PDO::PARAM_NULL);
$stmt->execute();
return $stmt->fetchAll();
}
public function get_sub_cat($id){
global $pdo;
$stmt = $pdo->prepare("select * from addresses where parent_id =:id");
$stmt->bindParam(':id', $id);
$stmt->execute();
return $stmt->fetchAll();
}
?>
ملف الصفحة الرئيسية التي ستحتوي على القوائم المنسدلة (index.php):
<html>
<head>
<title>Your Title</title>
</head>
<body>
<div id="cat">
<select id="select_change">
<?php
require_once('func.php');
$rows = get_cat();
foreach ($rows as $row) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php
}
?>
</select>
</div>
<div id="sub_cat">
<!-- Here the sub categories code will be appended -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="call.js"></script>
</body>
</html>
الملف الذي سينظّم التصنيفات الفرعية (sub_cat.php):
<select>
<?php
if (isset($_POST['get_sub_cat_id'])) {
require_once('func.php');
$rows = get_sub_cat($_POST['get_sub_cat_id']);
foreach ($rows as $row) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php
}
} // End Of "$_POST['get_sub_cat_id']" Checking
?>
</select>
الملف الذي سيقوم باستدعاء التصنيف الفرعي حسب التصنيف الأب (call.js):
$(document).ready(function () {
$('#select_change').on('change', function () {
var id = this.value;
$.post("sub_cat.php", {get_sub_cat_id: id}, function (data) {
$('#sub_cat').append(data);
});
});
});
فقط هكذا وسيعمل كل شيء بنجاح.