إنشاء الخيارات الديناميكية لعناصر مختارة باستخدام JavaScript

في تطوير الويب، غالبًا ما نواجه الحاجة إلى إنشاء خيارات ديناميكية لعناصر محددة. يمكن أن تستغرق هذه المهمة وقتًا طويلاً إذا تم إجراؤها يدويًا، خاصة عند التعامل مع عدد كبير من الخيارات. توفر هذه المقالة حلولاً لأتمتة هذه العملية باستخدام JavaScript.

إنشاء خيارات باستخدام حلقة For

أحد الأساليب المباشرة هو استخدام حلقة for للتكرار عبر مجموعة من القيم وإنشاء عناصر الخيار بشكل حيوي. على سبيل المثال، لإنشاء خيارات من 12 إلى 100 في عنصر تحديد بالمعرف "mainSelect"، يمكن استخدام الكود التالي:

var min = 12;
var max = 100;
var select = document.getElementById('mainSelect');

for (var i = min; i 
يقوم هذا الرمز بتهيئة الحد الأدنى والحد الأقصى للقيم واسترداد عنصر التحديد. ثم يقوم بإدخال حلقة لإنشاء عناصر الخيارات، وتعيين قيمها وHTML الداخلي، وإلحاقها بعنصر التحديد. 
 
  توسيع HTMLSelectElement  
 
 هناك طريقة بديلة تتمثل في قم بتوسيع النموذج الأولي لـ HTMLSelectElement، مما يتيح لك إضافة طريقة "populate()" مباشرة لتحديد العناصر. يتيح لك ذلك ربط الدالة السكانية بعقد DOM، مما يوفر بناء جملة أكثر إيجازًا.
HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min   100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i 
باستخدام هذا الامتداد، يمكنك ملء عناصر محددة مثل هذا:
document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});