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

afnan • منذ 6 سنوات

السلام عليكم ،

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

واذا كان الخيار مو موجود بالقائمة يستطيع اضافة الخيار اللي يبي، 

مثلا انا عندي قائمة باسماء الدول وعندي قائمة باسماء المدن ،

فانا هنا اريد امكانية اضافة دولة جديدة وايضا تحديد المدينه التي داخله فيها،

ايضا اريد امكانية اضافة مدينة جديدة  فمثلا لو اخترت السعودية وكانت تحتوي على الدمام الرياض بريدة، استطيع اضافة جدة مثلا ،

وشكرا .

وهذا الكود المستخدم 

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Dynamic Select Statements</title> 
<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the country selection list 
 var countryLists = new Array(4) 
 countryLists["empty"] = ["Select a Country"]; 
 countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
 countryLists["Asia"] = ["Russia", "China", "Japan"]; 
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
 /* CountryChange() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function countryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("country"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>
</head>
<body>
  <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>
</body>
 </html>
كلمات دليلية:

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

الإجابات (6)

Ali Majrashi • منذ 6 سنوات

بالنسبة لـ


;('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 للاتصال بقاعدة البيانات ومااضفت اي حماية للاكواد حتى يكون المثال بسيط لك وتعدلينه مثل ماتحبين فلازم اخذ الحيطة والحذر 

afnan • منذ 6 سنوات

 

شكرا لك 

أفدتني كثيرا بالنسبه لكن بالنسبة للخطوة الأخيره "عمل النموذج بلغة ال 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>

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

afnan • منذ 6 سنوات

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

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

Ali Majrashi • منذ 6 سنوات

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

عدلت لك ملف 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 ممكن تحويل المستخدم للصفحة الرئيسية حتى لايقوم بادراج الدولة او المدينة اكثر من مرة ولكن بسطت الاكواد ليسهل عليك تعديلها بمايناسبك وفهمها بسهولة

afnan • منذ 6 سنوات

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

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

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

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

جزاك اله خيرا

Ali Majrashi • منذ 6 سنوات
14 ساعات مضت, afnan said:

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

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

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

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

جزاك اله خيرا

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

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !