এই টিউটোরিয়ালটি জাভাস্ক্রিপ্ট ব্যবহার করে একটি নির্বাচন ট্যাগে একটি ইনপুট পাঠ্য থেকে একটি বিকল্প যোগ করার পদ্ধতিটি সংজ্ঞায়িত করবে।
কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে ইনপুট টেক্সট থেকে ট্যাগ নির্বাচন করার বিকল্প যোগ করবেন?
জাভাস্ক্রিপ্ট ব্যবহার করে একটি নির্বাচন ট্যাগে ইনপুট পাঠ্য থেকে একটি বিকল্প যোগ করতে, আপনি বিভিন্ন পদ্ধতি ব্যবহার করতে পারেন, যেমন:
আসুন একে একে প্রতিটি পদ্ধতি অন্বেষণ করি!
পদ্ধতি 1: অপশন কনস্ট্রাক্টরের সাথে add() পদ্ধতি ব্যবহার করে ইনপুট টেক্সট থেকে ট্যাগ নির্বাচন করার বিকল্প যোগ করুন
একটি নির্বাচন ট্যাগে ইনপুট পাঠ্য থেকে একটি বিকল্প যোগ করার জন্য, ' যোগ করুন() 'সহ পদ্ধতি' অপশন 'নির্মাতা। add() পদ্ধতিটি 'এর বিকল্পগুলিতে উপাদান যুক্ত করতে ব্যবহৃত হয় HTML সিলেক্ট এলিমেন্ট
বাক্য গঠন
একটি নির্বাচন ট্যাগে একটি বিকল্প যোগ করার জন্য add() পদ্ধতি ব্যবহার করতে প্রদত্ত সিনট্যাক্স অনুসরণ করুন:
যোগ করুন ( বিকল্প, বিদ্যমান বিকল্প ) ;এখানে ' বিকল্প ' নতুন বিকল্পের প্রতিনিধিত্ব করে যা 'এর জায়গায় যোগ হতে চলেছে বিদ্যমান বিকল্প ”
উদাহরণ
আমরা একটি ইনপুট ক্ষেত্র তৈরি করব, একটি ড্রপ-ডাউন মেনু ব্যবহার করে <নির্বাচন> ট্যাগ এবং একটি বোতাম যা একটি নির্বাচিত উপাদানে নতুন বিকল্প যোগ করবে, ' সন্নিবেশ বিকল্প() যখন এটি ক্লিক করা হয় তখন ফাংশন:
< ইনপুট টাইপ = 'পাঠ্য' আইডি = 'txt' স্থানধারক = 'অপশন যোগ করতে পাঠ্য লিখুন' >< আইডি নির্বাচন করুন = 'বিকল্প' >
< বিকল্প মান = 'গ' > গ বিকল্প >
নির্বাচন করুন >
< br < br >
< বোতাম আইডি = 'বিটিএন যোগ করুন' অনক্লিক = 'ইনসার্ট অপশন()' > বিকল্প যোগ করুন বোতাম >
JS ফাইলে, “নামক একটি ফাংশন সংজ্ঞায়িত করুন সন্নিবেশ বিকল্প() ' এবং তারপর বোতাম, টেক্সটবক্স, এবং তাদের নির্ধারিত আইডি সহ নির্বাচিত উপাদান অ্যাক্সেস করুন ' প্রশ্ন নির্বাচক() 'পদ্ধতি। তারপরে, অপশন কনস্ট্রাক্টর ব্যবহার করে বিকল্পের একটি উদাহরণ তৈরি করুন এবং বিদ্যমান বিকল্পটি এবং তালিকার শেষে যোগ করতে হবে এমন নতুন বিকল্পটি পাস করে add() পদ্ধতিতে কল করুন:
functioninsertOption ( ){
const addBtn = নথি querySelector ( '#addbtn' ) ;
const তালিকা বাক্স = নথি querySelector ( '#বিকল্প' ) ;
const ড্রপডাউন = নথি querySelector ( '#txt' ) ;
const বিকল্প = নতুন অপশন ( ড্রপডাউন মান , ড্রপডাউন মান ) ;
তালিকা বাক্স. যোগ করুন ( বিকল্প, অনির্ধারিত ) ;
ড্রপডাউন মান = ' ;
ড্রপডাউন ফোকাস ( ) ;
}
আউটপুট দেখায় যে পাঠ্য ক্ষেত্র থেকে নতুন বিকল্পটি ড্রপ-ডাউন মেনুর শেষে যোগ করা হয়েছে:
বিঃদ্রঃ: আপনি অনির্ধারিত পরিবর্তে দ্বিতীয় প্যারামিটার হিসাবে বিদ্যমান বিকল্পের মান যোগ করে নির্বাচন ট্যাগের শুরুতে বিকল্পটি যোগ করতে এই পদ্ধতিটি ব্যবহার করতে পারেন। এটি বিদ্যমান বিকল্পের আগে নতুন বিকল্প যোগ করবে।
আসুন অন্য পদ্ধতিতে চলে যাই!
পদ্ধতি 2: appendChild() পদ্ধতির সাথে createElement() ব্যবহার করে ইনপুট টেক্সট থেকে ট্যাগ নির্বাচন করার বিকল্প যোগ করুন
আরেকটি পদ্ধতি আছে যা ব্যবহার করে আপনি একটি নতুন উপাদান তৈরি করতে পারেন ' ক্রিয়েট এলিমেন্ট() 'সহ পদ্ধতি' appendChild() 'পদ্ধতি। এই পদ্ধতি ব্যবহার করে, আমরা নির্বাচন ট্যাগের শুরুতে বিকল্প যোগ করব।
বাক্য গঠন
appendChild() পদ্ধতি ব্যবহার করে ইনপুট টেক্সট থেকে নির্বাচন ট্যাগে বিকল্প যোগ করার জন্য নিম্নলিখিত সিনট্যাক্স ব্যবহার করুন:
শিশুকে সংযুক্ত করুন ( newOptionValue ) ;উদাহরণ
এখানে, আমরা দুটি বিকল্প যোগ করে একটি ড্রপডাউন তালিকা তৈরি করব “ গ ' এবং ' সি++ ', একটি ইনপুট ক্ষেত্র এবং একটি বোতাম যা ব্যবহারকারী-সংজ্ঞায়িত জাভাস্ক্রিপ্ট ফাংশনকে কল করবে ' সন্নিবেশ বিকল্প() ' যখন এটির অনক্লিক ইভেন্টটি ট্রিগার হয়:
< ইনপুট টাইপ = 'পাঠ্য' আইডি = 'txt' স্থানধারক = 'অপশন যোগ করতে পাঠ্য লিখুন' >< আইডি নির্বাচন করুন = 'ড্রপডাউন' >
< বিকল্প > গ বিকল্প >
< বিকল্প > গ ++ বিকল্প >
নির্বাচন করুন >
< br < br >
< বোতামে ক্লিক করুন = 'insertOption();' > বিকল্প যোগ করুন বোতাম >
নামের একটি ফাংশনে ' সন্নিবেশ বিকল্প() ”, প্রথমে তাদের নির্ধারিত আইডি ব্যবহার করে নির্বাচিত উপাদান এবং পাঠ্য ক্ষেত্রে অ্যাক্সেস করুন এবং তারপরে, একটি বিকল্প উদাহরণ তৈরি করার জন্য createElement() এবং createTextNode() পদ্ধতিতে কল করুন এবং একটি বিকল্প হিসাবে পাঠ্য মান আনুন। এর পরে, appendChild() পদ্ধতিতে কল করুন এবং একটি বিকল্প হিসাবে পাঠ্য মান পাস করুন তারপর, ' ব্যবহার করে নির্বাচন তালিকার শুরুতে এই বিকল্পটি যুক্ত করুন। সন্নিবেশ করার আগে() নির্বাচন উপাদান সহ পদ্ধতি:
functioninsertOption ( ){
var নির্বাচন করুন = নথি getElementById ( 'ড্রপডাউন' ) ,
পাঠ্যমূল্য = নথি getElementById ( 'txt' ) . মান ,
নতুন বিকল্প = নথি এলিমেন্ট তৈরি করুন ( 'বিকল্প' ) ,
newOptionValue = নথি টেক্সটনোড তৈরি করুন ( পাঠ্যমূল্য ) ;
নতুন বিকল্প। শিশুকে সংযুক্ত করুন ( newOptionValue ) ;
নির্বাচন করুন সন্নিবেশ আগে ( নতুন বিকল্প, নির্বাচন করুন। প্রথম সন্তান ) ;
}
আপনি দেখতে পাচ্ছেন যে আউটপুট দেখায় যে পাঠ্য ক্ষেত্র থেকে নতুন বিকল্পটি ড্রপ-ডাউন মেনুর শুরুতে যোগ করা হয়েছে:
আমরা একটি ইনপুট টেক্সট থেকে সিলেক্ট ট্যাগে বিকল্প যোগ করার জন্য সম্ভাব্য সব সমাধান কম্পাইল করেছি।
উপসংহার
JavaScript ব্যবহার করে একটি নির্বাচন ট্যাগে একটি ইনপুট পাঠ্য থেকে একটি বিকল্প যোগ করতে, আপনি add() পদ্ধতি বা appendChild() পদ্ধতি সহ জাভাস্ক্রিপ্ট বিল্ট-ইন পদ্ধতি ব্যবহার করতে পারেন। আপনি তালিকার শুরুতে এবং তালিকার শেষে একটি নির্বাচন ট্যাগে বিকল্প যোগ করতে পারেন। এই টিউটোরিয়ালে, আমরা বিস্তারিত উদাহরণ সহ JavaScript ব্যবহার করে একটি নির্বাচন ট্যাগে ইনপুট টেক্সট থেকে একটি বিকল্প যোগ করার পদ্ধতি সংজ্ঞায়িত করেছি।