سيحدد هذا البرنامج التعليمي الإجراء الخاص بإضافة خيار من نص إدخال إلى علامة تحديد باستخدام JavaScript.
كيفية إضافة خيار لتحديد علامة من إدخال نص باستخدام JavaScript؟
لإضافة خيار من إدخال نص إلى علامة تحديد باستخدام JavaScript ، يمكنك استخدام طرق مختلفة ، مثل:
دعونا نستكشف كل طريقة واحدة تلو الأخرى!
الطريقة 1: إضافة خيار لتحديد علامة من إدخال النص باستخدام أسلوب add () مع منشئ الخيار
لإضافة خيار من نص الإدخال في علامة تحديد ، استخدم ' يضيف() 'مع' خيار ' البناء. تُستخدم طريقة add () لإضافة العناصر إلى خيارات ' HTML حدد العنصر 'المعروف أيضًا باسم علامة
بناء الجملة
اتبع الصيغة المتوفرة لاستخدام طريقة add () لإضافة خيار في علامة تحديد:
يضيف ( الخيار الحاليالخيار ) ؛هنا ، ' اختيار 'الخيار الجديد الذي ستتم إضافته بدلاً من' الخيار الحالي '.
مثال
سننشئ حقل إدخال ، قائمة منسدلة باستخدام <اختر> العلامة والزر الذي سيضيف خيارات جديدة في عنصر التحديد ، واستدعاء ' insertOption () 'عند النقر عليها:
< نوع الإدخال = 'نص' هوية شخصية = 'رسالة قصيرة' نائب = 'أدخل نصًا لإضافة خيار' >< حدد معرف = 'والخيارات' >
< قيمة الخيار = 'ج' > ج اختيار >
تحديد >
< ر > < ر >
< معرف الزر = 'إضافة btn' عند النقر = 'insertOption ()' > إضافة خيار زر >
في ملف JS ، حدد وظيفة تسمى ' insertOption () 'ثم الوصول إلى الزر ومربع النص والعنصر المحدد باستخدام المعرف المخصص لهم باستخدام' محدد الاستعلام () ' طريقة. بعد ذلك ، قم بإنشاء مثيل للخيار باستخدام مُنشئ الخيار ، واستدعاء طريقة add () بتمرير الخيار الحالي والخيار الجديد الذي يجب إضافته في نهاية القائمة:
functioninsertOption ( ){
مقدار ثابت addBtn = وثيقة. الاستعلام ( '#addbtn' ) ؛
مقدار ثابت مربع القائمة = وثيقة. الاستعلام ( '#والخيارات' ) ؛
مقدار ثابت اسقاط = وثيقة. الاستعلام ( '#رسالة قصيرة' ) ؛
مقدار ثابت اختيار = الجديد خيار ( اسقاط. القيمة ، اسقاط. القيمة ) ؛
مربع القائمة. يضيف ( الخيار ، غير محدد ) ؛
اسقاط. القيمة = ' ؛
اسقاط. التركيز ( ) ؛
}
يوضح الناتج أنه تمت إضافة الخيار الجديد من حقل النص في نهاية القائمة المنسدلة:
ملحوظة: يمكنك استخدام هذه الطريقة لإضافة الخيار في بداية علامة التحديد عن طريق إضافة قيمة الخيار الحالي كمعامل ثاني بدلاً من غير معرف. سيضيف الخيار الجديد قبل الخيار الحالي.
دعنا ننتقل إلى الطريقة الأخرى!
الطريقة 2: إضافة خيار لتحديد علامة من نص الإدخال باستخدام createElement () مع أسلوب appendChild ()
هناك طريقة أخرى يمكنك من خلالها إنشاء عنصر جديد باستخدام ' createElement () 'مع' إلحاق الطفل() ' طريقة. باستخدام هذه المنهجية ، سنضيف الخيارات في بداية علامة التحديد.
بناء الجملة
استخدم الصيغة التالية لإضافة الخيار في علامة التحديد من نص الإدخال باستخدام طريقة appendChild ():
إلحاق الطفل ( newOptionValue ) ؛مثال
هنا ، سننشئ قائمة منسدلة بإضافة خيارين ' ج ' و ' C ++ '، وهو حقل إدخال وزر يستدعي وظيفة JavaScript المعرفة من قبل المستخدم والمسمى' insertOption () 'عند تشغيل حدث onclick الخاص به:
< نوع الإدخال = 'نص' هوية شخصية = 'رسالة قصيرة' نائب = 'أدخل نصًا لإضافة خيار' >< حدد معرف = 'اسقاط' >
< اختيار > ج اختيار >
< اختيار > ج ++ اختيار >
تحديد >
< ر > < ر >
< زر عند النقر = 'insertOption () ؛' > إضافة خيار زر >
في وظيفة تسمى ' insertOption () '، قم أولاً بالوصول إلى عنصر التحديد وحقل النص باستخدام المعرف المخصص لهما ، ثم قم باستدعاء أساليب createElement () و createTextNode () لإنشاء مثيل خيار وجلب القيمة النصية كخيار. بعد ذلك ، اتصل بطريقة appendChild () ومرر القيمة النصية كخيار ، ثم أضف هذا الخيار في بداية قائمة التحديد باستخدام ' إدراج قبل () 'مع تحديد العنصر:
functioninsertOption ( ){
فار حدد = وثيقة. getElementById ( 'اسقاط' ) و
textValue = وثيقة. getElementById ( 'رسالة قصيرة' ) . القيمة و
خيار جديد = وثيقة. خلق العنصر ( 'خيار' ) و
newOptionValue = وثيقة. createTextNode ( textValue ) ؛
خيار جديد. إلحاق الطفل ( newOptionValue ) ؛
تحديد. أدخل قبل ( خيار جديد ، حدد. أولا ) ؛
}
كما ترى ، يُظهر الإخراج أن الخيار الجديد من حقل النص يضاف في بداية القائمة المنسدلة:
قمنا بتجميع جميع الحلول الممكنة لإضافة خيارات من نص الإدخال إلى علامة التحديد.
استنتاج
لإضافة خيار من نص إدخال إلى علامة تحديد باستخدام JavaScript ، يمكنك استخدام أساليب JavaScript المضمنة ، بما في ذلك طريقة add () أو طريقة appendChild (). يمكنك إضافة خيارات في علامة تحديد في بداية القائمة وكذلك في نهاية القائمة. في هذا البرنامج التعليمي ، حددنا الإجراء لإضافة خيار من نص إدخال إلى علامة تحديد باستخدام JavaScript مع أمثلة مفصلة.