القوائم المنسدلة في HTML

فيصل العمري • منذ شهرين

السلام عليكم عندي استفسار,

انا عندي نموذج في صفحة HTML وعندي في النموذج 5 قوائم منسدله فيها نفس الاختيارات بحيث اان المستخدم يرتبها, وما ابغى تتكرر بحيث انه اذا اختار مثلا في القائمة الاولى تفاح ما تتكرر في بقية القوائم وافضل استخدام لغة java script

كلمات دليلية: html javascript

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

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

الإجابات (1)

Nawaf Khalifah • منذ شهرين

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

يمكن عمل ماطلبت بعدة طُرق بال JavaScript وليس هناك طريقة أصح من الأخرى، ولكنني شخصيًا أنصح باستخدام jQuery لمثل هذه المُتطلبات، وتاليًا سأقوم بشرح ماطلبت باستخدام مكتبة jQuery.

ماهي jQuery؟

jQuery برمجية حرة مفتوحة المصدر مرخصة تحت رخصتي إم آي تي وجي بي إل، ويمكن القول أنها مكتبة مصغرة لتسهيل التعقيد الموجود في كتابة الجافا سكربت، تم تدشينها رسمياً في يناير 2006.

 

وفي المثال التالي سأقوم بتطبيق الفكرة التي اقترحتها انت، وهي 3 قوائم مثلًا كل قائمة فيها فواكه، ويجب عند اختيار نوع من الفاكهة من اي قائمة لا يتم تكراره في اي قائمة اخرى.

يمكنك الاطلاع على المثال كاملًا بالضغط هنا.

 

قمت بانشاء القوائم باستخدام HTML:

<label>Select fruit #1</label>
<select id="f1">
<option disabled value="" selected>قم بالاختيار</option>
<option value="apple">تفاحة</option>
<option value="orange">برتقالة</option>
<option value="lemon">ليمونه</option>
</select>

<br>
<label>Select fruit #2</label>
<select id="f2">
<option disabled value="" selected>قم بالاختيار</option>
<option value="apple">تفاحة</option>
<option value="orange">برتقالة</option>
<option value="lemon">ليمونه</option>

</select>

<br>
<label>Select fruit #3</label>
<select id="f3">
<option disabled value="" selected>قم بالاختيار</option>
<option value="apple">تفاحة</option>
<option value="orange">برتقالة</option>
<option value="lemon">ليمونه</option>

</select>

 

وهذا التطبيق بال jQuery وقد قمت بشرح الشفرة:

// هنا يتم تنفيذ هذا الحدث عند تغيير قيمة القائمة المنسدلة.
$("select").on("change", function() {

// القائمة المنسدلة الحالية.
var currentElement = $(this);

// جلب القوائم المنسدلة الاخرى
$("select").not(this).each(function(index, element) {
// عنصر القائمة الحالي داخل الحلقة
var currentLoopElement = $(this);

// التحقق مما اذا كانت قيمة العنصر الحالي تساوي قيمة العنصر الحالي للحلقة.
if (currentElement.val() === currentLoopElement.val()) {

// تنيه المستخدم
alert("رجاءًا قم باختيار قيمة اخرى.");

// استرجاع قيمة العنصر الحالة للافتراضية
currentElement.prop("selectedIndex", 0);

// الخروج من الحلقة
return false; 
}
});

});

 

تحياتي،

فيصل العمري: شكرا على الاجابة ولكن احتاج الى تطبيقها بالجافا سكربت,اشرح لي طريقة واحدة

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

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