انشاء قائمة منسدلةdropdownlist تعتمد على قيم قائمة اخرى

السلام عليكم اخواني الاعزاء

بصراحة لاحظت الكثير يتساءل عن عمل قائمة منسدلة تعتمد قيمها على قائمة منسدلة اخرى

مثلا اذا اختار الزائر البلد عراق يتم اظهار المدن في القائمة الاخرى

وهذا الشرح

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

اولا كود الجافا سكربت

function changeitem(obj)
{
var x
var country=new Array("Baghdad","Mosul","Anbar","Dyala")
if (obj=='country')
{
for (x in country)
{
var opt=document.createElement("OPTION")
opt.text=country[x]
opt.value=country[x]
document.getElementById("newitem").options.add(opt)
}
}
}
</script>

ساقوم بشرحه لاحقا

وكود HTML

<form method="POST" action="--WEBBOT-SELF--">
	<p dir="ltr" align="center">
	<select id="items" size="1" name="D1" onchange="changeitem(this.value)">
	<option selected value="iraq">Name</option>
	<option value="email">Email</option>
	<option value="country">Country</option>
	</select></p>
	<p dir="ltr" align="center">
	<select size="1" name="D2" id="newitem">
	</select></p>
	<div align="center" id="txthint">
	</div>
</form>

عند تغيير الاختيار في القائمة سوف يتم تفجير الحدث onchange ليستدعي الدالة changeitem في الجافا سكربت ويقوم بارسال القيمة الحالية كوسيط للدالة

الكود في الجافا يستلم المتغير obj الذي تم ارساله بواسطة الحدث onchange

الان نقوم بخلق عنصر جديد option

var opt=document.createelement("OPTION")

وتعريف مصفوفة جديده فيها اسماء المدن

نقوم باضافة المصفوفه الى العنصر opt عن طريق الخاصيه text والتي تحمل الاسم الذي سيظهر للمستخدم

والخاصيه value التي تحمل القيمة التي القيمة الفعليه التي يحملها العنصر

وهذا كل شي

ارجو ان اكون قد وفقت في الشرح