<নির্বাচন> উপাদানটিতে নির্বাচিত <বিকল্প> এর পাঠ্য পুনরুদ্ধার করা হচ্ছে

Question

নিম্নলিখিতটিতে:

<select id="test">
    <option value="1">Test One</option>
    <option value="2">Test Two</option>
</select>

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে নির্বাচিত বিকল্পের (যেমন "টেস্ট ওয়ান" বা "টেস্ট টু") এর পাঠ্য পেতে পারি

document.getElementsById('test').selectedValue 1 বা 2 প্রদান করে, কোন সম্পত্তি নির্বাচিত বিকল্পটির পাঠ্য ফেরত দেয়?

Answer 1

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');

Comments

সর্বদা উজ্জ্বল জাভাস্ক্রিপ্ট!

— দানিয়র

এই উত্তরটি পুরানো হয়েছে, একটি দুর্দান্ত HTML5 ওয়ান-লাইনারের জন্য নীচে @ ডেভিডজেবির উত্তর দেখুন।

— ক্রিস্টাল্কেকস

@ খ্রিস্টালটেকস - ওয়ান-লাইনার যদি কিছু না নির্বাচিত হয় তবে ব্যতিক্রম ছুঁড়ে ফেলে । কম লাইন সবসময় ভাল হয় না।

— শান উজ্জ্বল

Answer 2

আপনি যদি jQuery ব্যবহার করেন তবে আপনি নিম্নলিখিত কোডটি লিখতে পারেন:

$("#selectId option:selected").html();

Comments

যেহেতু তিনি এই পাঠ্যটি চান, সম্ভবত ব্যবহার করা আরও ভাল.text()

— মুহাদ

সঙ্গে গুলিয়ে ফেলা যাবে না $("#selectId option[selected]"), যা যা "নির্বাচিত" অ্যাট্রিবিউট রয়েছে কিন্তু বর্তমানে নির্বাচিত না হতে পারে বিকল্প নির্বাচন হবে।

— mowwwalker

আরও জটিল বলে মনে হচ্ছে!

— NDEthos

Answer 3

document.getElementById('test').options[document.getElementById('test').selectedIndex].text;

Comments

অন্যান্য বিকল্পগুলির চেষ্টা করার পরেও এটি আমার পক্ষে কাজ করেছিল।

— মিমি

এই শব্দটি নিখুঁত!

— অ্যালবার্ট হিডালগো

Answer 4

এইচটিএমএল 5 এর অধীনে আপনি এটি করতে সক্ষম হবেন:

document.getElementById('test').selectedOptions[0].text

Https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions- তে MDN এর ডকুমেন্টেশন ক্রোম, ফায়ারফক্স, এজ এবং মোবাইল ব্রাউজার সহ পূর্ণ ক্রস-ব্রাউজার সমর্থন (কমপক্ষে ডিসেম্বর 2017 হিসাবে) নির্দেশ করে , তবে ইন্টারনেট এক্সপ্লোরার বাদ দিয়ে।

Comments

+1, ইতিমধ্যে এই পথটি। ফায়ারফক্সের টিকিট স্থির হয়ে গেছে এবং তারা এমনকি এটির সমর্থন করে কিনা তা যাচাই করতে আমি এমএস এজ খোলার বিরক্তও করেছিলাম।

— ক্রিস্টাল্কেকস

Answer 5

selectElement.options[selectElement.selectedIndex].text;

তথ্যসূত্র:

• বিকল্প সংগ্রহ, নির্বাচিত তালিকাভুক্ত সম্পত্তি: এইচটিএমএল ডিওএম নির্বাচন করুন অবজেক্ট
• পাঠ্য সম্পত্তি: এইচটিএমএল ডোম অপশন অবজেক্ট
• এই প্রশ্নের ঠিক উত্তর: বিকল্প পাঠ্য সম্পত্তি

Comments

@ ওয়ার্মহিট যে উত্তরটি দিয়েছিল তার চেয়ে বুঝতে সহজ। সরলকরণের জন্য +1

— জ্যাক ম্যাথিউ

Answer 6

optionsসম্পত্তি রয়েছে সব <options>- আপনি সেখানে সন্ধান করতে পারেন থেকে.text

document.getElementById('test').options[0].text == 'Text One'

Answer 7

আপনি selectedIndexবর্তমান নির্বাচিত পুনরুদ্ধার করতে ব্যবহার করতে পারেন option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text

Answer 8

this.options [this.selectedIndex] .innerText

Answer 9

যদি আপনি এই থ্রেডটি খুঁজে পেয়েছেন এবং এখানে ইভেন্টের মাধ্যমে নির্বাচিত বিকল্প পাঠ্যটি কীভাবে পাবেন তা জানতে চান নমুনা কোড:

alert(event.target.options[event.target.selectedIndex].text);

Answer 10

নিজস্ব তালিকাভুক্ত অপশন সূচি সনাক্ত করতে, নির্বাচন করুন তালিকা বস্তুটি ব্যবহার করুন। সেখান থেকে - সেই সূচকের অভ্যন্তর HTMLটি ধরুন। এবং এখন আপনার কাছে সেই বিকল্পটির পাঠ্য স্ট্রিং রয়েছে।

<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
       <option value="">Select Actions</option>
       <option value="1">Print PDF</option>
       <option value="2">Send Message</option>
       <option value="3">Request Review</option>
       <option value="4">Other Possible Actions</option>
    </select>

Comments

কিছু ব্যাখ্যা যুক্ত করুন

— HaveNoDisplayName

.innerHTMLসমস্ত শিশু এবং তাদের বৈশিষ্ট্য পায়। যখন কোনও উপাদানটির কোনও শিশু না থাকে তখন এটি কাজ করে, আপনার যদি বাচ্চাদের সাথে একটি উপাদান থাকে তবে এটি লক্ষ্যমাত্রার চেয়ে বেশি ফিরে আসে।

— হিপকিস

আপনার <শিরোনাম> বাচ্চাদের মধ্যে কতগুলি "শিশু" অন্তর্নিহিত থাকার প্রত্যাশা করছেন? </ Translation> ট্যাগগুলি?

— ক্রিপার্সটানসন

Answer 11

সরল জাভাস্ক্রিপ্ট সহ কেবল jQuery ছাড়াই @artur এর মতো:

// @ শন-ব্রাইটের "এল্ট" ভেরিয়েবল ব্যবহার করা

var selection=elt.options[elt.selectedIndex].innerHTML;

Answer 12

সহজ, সহজ উপায়:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;

Comments

যদিও এই কোড স্নিপেট সমস্যার সমাধান করতে পারে, এটি কেন বা কীভাবে প্রশ্নের উত্তর দেয় তা ব্যাখ্যা করে না। আপনার কোডটির জন্য একটি ব্যাখ্যা অন্তর্ভুক্ত করুন , কারণ এটি সত্যিই আপনার পোস্টের মান উন্নত করতে সহায়তা করে। মনে রাখবেন যে আপনি ভবিষ্যতে পাঠকদের জন্য প্রশ্নের উত্তর দিচ্ছেন, এবং সেই লোকেরা আপনার কোড পরামর্শের কারণগুলি জানেন না।

— লুকা কিবল

আমি দেখতে পাচ্ছি না এটি কীভাবে সহজ বা সহজ। আপনি find()যখন নির্বাচিত আইটেমটির সূচি ইতিমধ্যে জানবেন আপনি কেন ব্যবহার করবেন ? এছাড়াও, যদি কোনও নির্বাচিত আইটেম ( <select multiple>) না থাকে তবে এটি ত্রুটি তৈরি করবে।

— শান ব্রাইট