اختيار من قائمة مرتبطة بقائمة اخرى
afnan • منذ 8 سنوات
السلام عليكم ،
انا عندي قائمتين مرتبطات ببعض، وابي انه المستخدم اذا اختار من القائمة الاولى راح يطلع له خيارات في القائمة الثانية بناء على ما اختاره،
واذا كان الخيار مو موجود بالقائمة يستطيع اضافة الخيار اللي يبي،
مثلا انا عندي قائمة باسماء الدول وعندي قائمة باسماء المدن ،
فانا هنا اريد امكانية اضافة دولة جديدة وايضا تحديد المدينه التي داخله فيها،
ايضا اريد امكانية اضافة مدينة جديدة فمثلا لو اخترت السعودية وكانت تحتوي على الدمام الرياض بريدة، استطيع اضافة جدة مثلا ،
وشكرا .
وهذا الكود المستخدم
<?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 • منذ 8 سنوات
وعليكم السلام ورحمة الله وبركاته
هل يوجد قاعدة بيانات لحفظ الدول والمدن ؟ للتعامل معها في توليد القوائم ؟
Ali Majrashi • منذ 8 سنوات
29 دقائق مضت, afnan said:نعم يوجد قاعدة بيانات
اذا ممكن مشاركة sql للجداول المعنية بالسؤال اذا ممكن لتسهل المساعدة
afnan • منذ 8 سنوات
لا يوجد قاعدة بيانات
لان هنا استخدمنا arraylist باستخدام javascript، لا يوجد جداول
Ali Majrashi • منذ 8 سنوات
في javascript المصفوفات لاتحفظ البيانات بشكل دائم الا اذا كان المرغوب حفظ بشكل مؤقت لنفس المستخدم اما اذا كان المطلوب حفظ دائم ليستخدمه مستخدم آخر لازم لنا طريقة لحفظ البيانات مثل قواعد البيانات
بالنسبة للمطلوب انه يتم انشاء DropDown وتكون تفاعليه بحيث الضغط عليها يتم تفعيل DropDwon أخرى ممكن عملها بواسطة javascript او بمساعدة من Jquery لسهولتها او استخدام احد المكتبات الجاهزة مثل مكتبة jquery.cascadingdropdown.js حيث يطلق على هذا النوع من DropDwon اسم Cascading Dropdown
انا قمت بعمل مشروع تجريبي لك ممكن تستخدميه وتعدلين عليه بما يناسب احتياجاتك
قمت بانشاء ملف index.html ومحتواه
وداخل الملف هذا استدعيت مكتبة jquery ثم مكتبة jquery.cascadingdropdown.js وكتبت جافاسكربت يستهدف div عن طريق id وظيفته توليد Dropdwon بشكل آلي
<!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>
<select class="step1" name="country">
<option value="">select country</option>
</select>
<select class="step2" name="city">
<option value="">select city</option>
</select>
</div>
<script>
$('#selectCity').cascadingDropdown({
selectBoxes: [
{
selector: '.step1',
source: 'api/getCountries.php',
},
{
selector: '.step2',
requires: ['.step1'],
source: 'api/getCity.php',
}
]
});
</script>
</body>
</html>في داخل الكود javascript الخاص بتوليد DropDown اول selector راح يعمل طلب لملف getCountries.php وراح يتوقع نتيجه على شكل JSON Object ولها صيغة محددة كالتالي
[
{
"label": "Item 1",
"value": "1"
},
{
"label": "Item 2",
"value": "2"
}
]وثاني selector راح يعمل ajax request لملف getCity.php وراح يتوقع JSON Object بنفس الصيغة المذكورة فوق ممكن عمل اكثر من selector وكل selector يعتمد على الثاني بكل سهولة
ثم قمت بإنشاء مجلد js يحتوي ملفات المكتبات jquery و jquery.cascadingdropdown.js
ثم انشئت مجلد api وهذا الملف راح يخزن معلومات الدول تحت ملف getCountries.php وملف راح يخزن معلومات المدن تحت ملف getCity.php
طبعا هنا استخدمت php انها ترجع JSON Object بالصيغه الي تدعمها المكتبة اول ملف تبع الدول بسيط راح يرجع مسميات الدول مباشرة والثاني تبع المدن راح يجيه طلب ajax ووظيفة الملف ياخذ الطلب ويرجع المدن الخاصة بكل دوله على شكل json object ليتم عرضها داخل DropDown الثانيه
ممكن تطوير الملفين ليتصلو بقاعدة البيانات ثم جلب النتائج بشكل آلي بحيث getCountries.php يتصل بقاعدة البيانات ويجلب كل الدول المخزنة بجدول وملف getCity.php يتصل بقاعدة البيانات ليجلب المدن المخزنة لكل دولة انا بسطتهم لك ليتم فهم طريقة عمل المكتبة
ارفقت لك مجلد المشروع مضغوط لاستخدامه مباشره والتعديل عليه بكل بساطة لتعمل ملفات php يجب ان تكون داخل مجلد السيرفر المحلي www او htdocs على حسب السيرفر المستخدم بجهازك
رابط المكتبة jquery.cascadingdropdown.js على GitHub ولأمثلة على كيفية استخدام المكتبة الضغط هنا
afnan • منذ 8 سنوات
شكرا لك لمساعدتك
ممكن توضح لي أكثر هذا الكود
;('header('Content-Type:application/json
;(echo json_encode($countries
أنا الان قمت بنسخ جميع الملفات في السيرفر cpanal وعمل كما أريد لكن هنا لم أستطيع إدخال خيارات جديدة في الدول والمدن ؟! ولا حتى أختبر تواجد هذه الخيارات بعد الاضافة !
هل هذا متعلق بقاعدة البيانات كما ذكرت ؟
أنا أملك قاعدة بيانات ماذا افعل بعد ذلك ياليت تفيدني بالخطوات بالضبط لانه هذه اول مره أعمل مع jquery!
هل أنشى الدول بجدول والمدن باخر ؟
ماهي الاعمده ؟
وبعد الاتصال كيف يكون استدعاء البيانات من الجدول وربطها ثم عرضها كخيار جديد في القائمة؟
شكرا لك مرة أخرى.
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !