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

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

يمكن عمل ماطلبت بعدة طُرق بال 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; 
}
});

});

تحياتي،