التحكم في عرض خيارات مربع التحديد

في HTML، من خلال تطبيق سمات النمط على كل من عنصر التحديد وعناصر الخيارات الفرعية الخاصة به، يكون من الممكن من الممكن تحديد عرض كل خيار للتأكد من مطابقته لعرض مربع التحديد. ومع ذلك، فإن تحقيق ذلك باستخدام CSS وحده قد لا يكون كافيًا.

يتضمن أحد الحلول دمج JavaScript لمزيد من التحكم في عرض الخيار وتمكين علامات القطع عند الضرورة. يقدم كود JavaScript المقدم وظيفة سلسلة قصيرة تقوم بضبط النص ديناميكيًا داخل عناصر الخيار التي تحتوي على فئة .short وسمة حد البيانات.

إليك كيفية تنفيذ هذا الحل:

Select your UniversityBangladesh University of Engineering and TechnologyMawlana Bhashani Science and Technology University

select {
  width: 250px;
}

option {
  width: 250px;
}

function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail = '...';
  if (elements && elements.length) {
    for (const element of elements) {
      let text = element.innerText;
      if (element.hasAttribute('data-limit')) {
        if (text.length > element.dataset.limit) {
          element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
        }
      } else {
        throw Error('Cannot find attribute \'data-limit\'');
      }
    }
  }
}

window.onload = function() {
  shortString('.short');
};

يضمن هذا الأسلوب أن يكون عرض الخيار مطابقًا لعرض مربع التحديد، وعندما يتجاوز نص الخيار الحد المحدد، يتم استبدال النص الزائد بعلامة حذف.