كيف أقوم بربط مجموعة من عناصر <select> ببعضها البعض باستخدام JS AJAX؟

Omar Abdelaziz4 · 28 يناير

السلام عليكم

لقد قمت بإنشاء صفحة HTML

لدي form ويوجد بداخله 3 عناصر <select>، وكل عنصر يحتوي على 3 اختيارات، ويتم تكرار الـ 3 اختيارات في باقي عناصر <select>،

لكني اريد لو تم اختيار الإختيار الأول في عنصر <select> الأول،

يقوم تلقائيًا بإخفاء العنصر الأول بين بقية العناصر.

و شكرًا لكم

Mustafa Suleiman · 28 يناير

ما فهمته هو أن لديك صفحة HTML تحتوي على نموذج (form) وثلاثة عناصر select، حيث يحتوي كل select على ثلاثة اختيارات، وعند اختيار أي اختيار في ال select، أريد أن يتم تعطيل ذلك الاختيار في ال select الباقي تلقائيًا.

ويتم الأمر كالتالي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unique Selection</title>
</head>
<body>

<form>
  <select id="select1" onchange="handleSelectChange(1)">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <select id="select2" onchange="handleSelectChange(2)">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <select id="select3" onchange="handleSelectChange(3)">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</form>

<script>
  function handleSelectChange(selectedIndex) {
    const selectedOption = document.getElementById(`select${selectedIndex}`).value;

    for (let i = 1; i <= 3; i++) {
      if (i !== selectedIndex) {
        const selectElement = document.getElementById(`select${i}`);

        for (let j = 0; j < selectElement.options.length; j++) {
          const option = selectElement.options[j];

          if (option.value === selectedOption || selectedOption === "") {
            option.disabled = true;
          } else {
            option.disabled = false;
          }
        }
      }
    }
  }
</script>

</body>
</html>

Omar Abdelaziz4 · 28 يناير

هذا جيد، لكن إذا تم تحديد التحديد الأول في العنصر الأول، و التحديد الثاني في العنصر الثاني، ولكن العنصر الأول يظهر في التحديد الثالث، وهذا لا أريده.

تم التعديل في 28 يناير بواسطة Omar Abdelaziz4

كيف أقوم بربط مجموعة من عناصر <select> ببعضها البعض باستخدام JS AJAX؟

السؤال

Omar Abdelaziz4

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Omar Abdelaziz4

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية