اختيار من قائمة مرتبطة بقائمة اخرى

بالنسبة لـ

;('header('Content-Type:application/json
;(echo json_encode($countries

اول دالة header احد دوال php الخاصة بتعريف HTTP header للمستخدم ممكن تشوفي امثله عليها واستخدامها من هنا PHP header() Function

ثاني داله وهي خاصة بطباعة json object تقوم بتحويل المصفوفة الى json object داخل الصفحة وبما انا اخبرنا المتصفح ان القيمه المرجعه هي json فجافاسكربت تستطيع التعرف على القيمة المرجعه والتعامل معها بكل سهولة

بالنسبة لقاعدة البيانات فهي بسيطة وسهله كل الي تحتاجين جدولين واحد countries ويحتوي اسم الدول والثاني cities ويحتوي اسم المدن وكل مدينة تبع اي دولة 

جدول countries يحتوي على

• id
• name

جدول cities يحتوي على

• id
• name
• country_id

ممكن انشاء جدول countires بهذا الامر 

CREATE TABLE `countries` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(250) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

وجدول المدن ممكن انشائه بهذا الأمر 

CREATE TABLE `cities` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(250) DEFAULT NULL,
  `country_id` int(11) unsigned DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

للاستفادة من الجدولين لتوليد النتائج نقوم بالتعديل على ملف getCountries.php داخل مجلد api ليصبح محتواه كالتالي

<?php

// Config for database connection
$username = 'root';
$password = 'root';
$db = '3alampro-help';

// Check connection
try {
    $pdo = new PDO ('mysql:host=localhost;dbname=' . $db, $username, $password); 
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo $e->getMessage();
    die();
}

$query = "SELECT * FROM countries";

$query = $pdo->query($query);

$countries = array();

while ($country = $query->fetch()) {
	$countries[] = ['label' => $country['name'], 'value' => $country['id']];
}

header('Content-Type: application/json');
echo json_encode($countries);

وتعديل محتوى ملف getCity.php داخل مجلد api ليصبح محتواه كالتالي

<?php

// Config for database connection
$username = 'root';
$password = 'root';
$db = '3alampro-help';

// Check connection
try {
    $pdo = new PDO ('mysql:host=localhost;dbname=' . $db, $username, $password); 
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo $e->getMessage();
    die();
}

$country_id = (int) $_GET["country"];

$query = "SELECT * FROM cities WHERE country_id = $country_id";

$query = $pdo->query($query);

$cities = array();

while ($city = $query->fetch()) {
	$cities[] = ['label' => $city['name'], 'value' => $city['id']];
}

header('Content-Type: application/json');
echo json_encode($cities);

بعدها راح تعمل القوائم بشكل آلي وتعتمد على المخزن بقاعدة البيانات لتوليد النتائج

باقي آلية اضافة الدول او المدن ممكن عمل نموذج html يقوم بارسال اسم الدوله او المدينه و الدولة لملف php ليضيفها داخل قاعدة البيانات وهي سهله وسبق لك انشاء نماذج وحفظ النماذج بقاعدة البيانات

في الملفين getCity.php و getCountries.php انا استخدمت PDO للاتصال بقاعدة البيانات ومااضفت اي حماية للاكواد حتى يكون المثال بسيط لك وتعدلينه مثل ماتحبين فلازم اخذ الحيطة والحذر 

شكرا لك 

أفدتني كثيرا بالنسبه لكن بالنسبة للخطوة الأخيره "عمل النموذج بلغة ال html"  نعم أعرف كيف ولكن هنا أذا اضفت ع هذا الكود form يبقى مشكله الربط ما بين dropdown list and input box في مكان واحد وبنفس الوقت يربط ال id مع المدينة؟

بشكل أوضح كيف أعدل ع ملف index.html الذي كتبته سابقا حتى يصبح سوال اختر الدوله ممكن الادخال او الاختيار بوقت واحد مع اخذ الاعتبار إرتباطه بالمدينه ليجبر المستخدم إدخال المدينة كذلك؟

مثال للتوضيح هنا "لكن هنا لا يحفظ القيم المدخله بعكس ما أريد" 

<h5 >Select the country </h5>
                        
                        <p>
    <input type="text" name="country" list="country" />
    <datalist id="country">
                           <option value="United States" >United States</option>
                            <option value=" United Kingdom" > United Kingdom</option>
                             <option value="Netherlands" >Netherlands</option>
                            <option value="Saudi Arabia">Saudi Arabia</option>
                            <option value="Indian">Indian</option>
                            <option value="Sweden">Sweden</option>
                            <option value="Ukraine">Ukraine</option>
                            <option value="Turkey">Turkey</option>
                            <option value="Iran">Iran</option>
                            <option value="Egypt">Egypt</option>
                             <option value="Pakistan">Pakistan</option>
                              <option value="Germany">Germany</option>
                          </datalist></p>

جزاك الله خيرا ،، 

ممكن جزاك الله خيرا تساعدني في اقرب وقت لانه غدا وقت تسليم المشروع .

وشكرا جزيلا.. نفع الله بك

مثل مااجبتك بردي فوق بعمل نموذج وبناء عليه يتم اضافة المدينة او المدينه حسب الاختيار 

عدلت لك ملف index.html ليصبح محتواه

<!DOCTYPE html>
<html>
<head>
	<title>Cascading DropDwon</title>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cascadingdropdown.js"></script>

<div id="selectCity">
	<h4>City finder</h4>
    <form action="add.php" method="POST">
    	<select class="step1" name="country">
    		<option value="">select country</option>
    	</select>
    	<select class="step2" name="city">
    		<option value="">select city</option>
    	</select>
        <label for="new-country">Country Name</label>
        <input type="text" name="new-country"></input>
        <label for="new-city">City Name</label>
        <input type="text" name="new-city"></input>
        <button>Submit</button>
    </form>
</div>

<script>
$('#selectCity').cascadingDropdown({
selectBoxes: [
    {
        selector: '.step1',
        source: 'api/getCountries.php',
    },
    {
        selector: '.step2',
        requires: ['.step1'],
        source: 'api/getCity.php',
    }
]
});
</script>

</body>
</html>

وبعدها اضفت ملف جديد باسم add.php ومحتواه

<?php

// Config for database connection
$username = 'root';
$password = 'root';
$db = '3alampro-help';

// Check connection
try {
    $pdo = new PDO ('mysql:host=localhost;dbname=' . $db, $username, $password); 
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo $e->getMessage();
    die();
}

if (isset($_POST['new-country']) and !empty($_POST['new-country'])) {
	// query to add new country to DB
	// prepare sql and bind parameters
    $stmt = $pdo->prepare("INSERT INTO countries (name) VALUES (:name)");
    $stmt->bindParam(':name', $name);

    // insert a row
    $name = $_POST['new-country'];
    $stmt->execute();
}

if (isset($_POST['country']) and !empty($_POST['country']) and !empty($_POST['new-city'])) {
	// query to add new city to DB
	// prepare sql and bind parameters
	$stmt = $pdo->prepare("INSERT INTO cities (name, country_id) VALUES (:name, :country_id)");
    $stmt->bindParam(':name', $name);
    $stmt->bindParam(':country_id', $country_id);

    // insert a row
    $name = $_POST['new-city'];
    $country_id = $_POST['country'];
    $stmt->execute();
}

وبناء على ماتم اختياره من النموذج وارساله يتم ادراج الدوله اذا ادخل المستخدم اسم للدولة الجديدة في اول حقل اويستطيع ادراج  المدينة اذا قام بتحديد دولة من القائمة المنسدلة ثم ادخل اسم مدينة جديدة ليتم ادراجها مباشرة بدون تعبئة حقل الدولة ممكن التعديل على هذا الحقل ليصبح اكثر تفاعلي بحيث يتم اخفاء حقل الدوله اذا تم اختيار دولة من القائمة المنسدلة بواسطة جافاسكربت او اضهارة في حالة عدم تحديد دولة والنموذج بابسط حالاته يمكنك التعديل عليه وتطويره بمايناسبك وايضا في ملف php ممكن تحويل المستخدم للصفحة الرئيسية حتى لايقوم بادراج الدولة او المدينة اكثر من مرة ولكن بسطت الاكواد ليسهل عليك تعديلها بمايناسبك وفهمها بسهولة

شكرا لك أفدتني كثيرا ،، عذرا ع الاطالة ولكن لدي عدة ملاحظتين :

هنا يمكن إضافة دولة جديدة أو مدنيه جديدة لدولة موجودة بالقائمة

كيف أوفر خيار خيار إضافة دولة جديدة ومدينة جديدة معا ؟

كيف أجبر المستخدم ع عدم إمكانية  الارسال قبل الاجابة ع السؤالين سواء بالادخال أو الاختيار (هنا أين أضع خاصيه مطلوب) ؟

جزاك اله خيرا

14 ساعات مضت, afnan said:

شكرا لك أفدتني كثيرا ،، عذرا ع الاطالة ولكن لدي عدة ملاحظتين :

هنا يمكن إضافة دولة جديدة أو مدنيه جديدة لدولة موجودة بالقائمة

كيف أوفر خيار خيار إضافة دولة جديدة ومدينة جديدة معا ؟

كيف أجبر المستخدم ع عدم إمكانية  الارسال قبل الاجابة ع السؤالين سواء بالادخال أو الاختيار (هنا أين أضع خاصيه مطلوب) ؟

جزاك اله خيرا

الله يعافيك ممكن عن طريق استخدام if لو تراجعين ملف add.php والكود الموجود داخله راح تلاحظين وجود if لاضافة الدولة جديدة و if ثانيه اذا حدد دوله وكتب مدينه جديدة راح يضيفها ممكن عمل if باول الكود يتحقق اذا مكتوب اسم دولة جديدة ومدينه يضيفهم لقاعدة البيانات