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

afnan • منذ 3 سنوات

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

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

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

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

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

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

وشكرا .

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

<?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 • منذ 3 سنوات

وعليكم السلام ورحمة الله وبركاته

هل يوجد قاعدة بيانات لحفظ الدول والمدن ؟ للتعامل معها في توليد القوائم ؟

afnan • منذ 3 سنوات

نعم يوجد قاعدة بيانات 

Ali Majrashi • منذ 3 سنوات
29 دقائق مضت, afnan said:

نعم يوجد قاعدة بيانات 

اذا ممكن مشاركة sql للجداول المعنية بالسؤال اذا ممكن لتسهل المساعدة 

afnan • منذ 3 سنوات

لا يوجد قاعدة بيانات 

لان هنا استخدمنا arraylist باستخدام javascript، لا يوجد جداول 

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

في 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 على حسب السيرفر المستخدم بجهازك

Q56.zip

رابط المكتبة jquery.cascadingdropdown.js على GitHub ولأمثلة على كيفية استخدام المكتبة الضغط هنا

afnan • منذ 3 سنوات

شكرا لك لمساعدتك 

ممكن توضح لي أكثر هذا الكود 

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

أنا الان قمت بنسخ جميع الملفات في السيرفر cpanal وعمل كما أريد لكن هنا لم أستطيع إدخال خيارات جديدة في الدول والمدن ؟! ولا حتى أختبر تواجد هذه الخيارات بعد الاضافة !

هل هذا متعلق بقاعدة البيانات كما ذكرت ؟

أنا أملك قاعدة بيانات ماذا افعل بعد ذلك ياليت تفيدني بالخطوات بالضبط لانه هذه اول مره أعمل مع jquery!

هل أنشى الدول بجدول والمدن باخر ؟

ماهي الاعمده ؟

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

شكرا لك مرة أخرى.

 

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

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