জাভাস্ক্রিপ্ট সহ নির্বাচিত বিকল্প পাঠ্য পান

Question

আমার এখানে ড্রপডাউন তালিকা রয়েছে:

<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে মানটির চেয়ে প্রকৃত বিকল্প পাঠ্য পেতে পারি? আমি এরকম কিছু দিয়ে মান পেতে পারি:

<select id="box1" onChange="myNewFunction(this.selectedIndex);" >

বরং 7122আমি চাই চেয়ে cat।

Comments

stackoverflow.com/a/1085810/1339473 আরো সহায়তার জন্য এই দেখতে

— QuokMoon

সম্ভাব্য সদৃশ কিভাবে জাভাস্ক্রিপ্ট ব্যবহার dropdownlist নির্বাচিত মান পেতে? - শিরোনাম সত্ত্বেও, এটি আপনার প্রশ্নের উত্তর দেয়।

— ফেলিক্স ক্লিং

<সিলেক্ট> উপাদানটিতে নির্বাচিত <

— ফাংশন

Answer 1

বিকল্প চেষ্টা করুন

function myNewFunction(sel) {
  alert(sel.options[sel.selectedIndex].text);
}

<select id="box1" onChange="myNewFunction(this);">
  <option value="98">dog</option>
  <option value="7122">cat</option>
  <option value="142">bird</option>
</select>

Comments

রেজেক্স ব্যবহার করার চেষ্টা করার সময় প্রথম নিয়ম করুন searching স্ট্যাক ওভারফ্লো অনুসন্ধান চালিয়ে যান যতক্ষণ না আপনি

— রিজেক্স

মূলধন ছাড়াই অনভিজ্ঞ লিখতে আরও পরিষ্কার সি

— সাইমন বার্স

Answer 2

সরল জাভাস্ক্রিপ্ট

var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;

JQuery:

$("#box1 option:selected").text();

Comments

@mplungjan তুমি এখানে কেন মন্তব্য করব না যে jQuery ব্যবহার .textContentএবং .innerTextজন্য .text()পদ্ধতি অপারেশন? এটি মানদণ্ডে নয়, এটি সম্পূর্ণরূপে ভুল কারণ এটি ব্যবহার করে না .text। ডাউনভোটস কোথায়?

— ভিজিওন

ভেতরের এইচটিএমএল কোথায়?

— এমপ্লুঞ্জন

@mplungjan এটা নয় innerHTML, innerTextএমনকি খারাপ।

— ভিজিওএন

আমি বিকল্পটি দেখতে পাচ্ছি: {get: function (elem) {var val = elem.attributes.value; ফিরে! ভাল || val.specified? elem.value: elem.text; 1. 1.9

— mplungjan

Answer 3

এই সমস্ত ক্রিয়াকলাপ এবং এলোমেলো জিনিস, আমি মনে করি এটি ব্যবহার করা ভাল, এবং এটি এর মতো করুন:

this.options[this.selectedIndex].text

Answer 4

এইচটিএমএল:

<select id="box1" onChange="myNewFunction(this);">

javascript:

function myNewFunction(element) {
    var text = element.options[element.selectedIndex].text;
    // ...
}

ডেমো: http://jsfiddle.net/6dkun/1/

Comments

দেখতে এই মন্তব্যটি আমি আমাদের কথোপকথন সরানো হয়েছে যেহেতু আপনি আপনার কোড সংশোধন করা হয়েছে

— mplungjan

Answer 5

ব্যবহার -

$.trim($("select").children("option:selected").text())   //cat

এখানে হৈচৈ - http://jsfiddle.net/eEGr3/

Comments

প্রশ্নটি কোথায় jQuery উল্লেখ করে?

— এমপ্লুঞ্জন

Answer 6

আপনাকে বিকল্পটির অভ্যন্তরীণ এইচটিএমএল পেতে হবে এবং এর মান নয়।

this.innerHTMLপরিবর্তে ব্যবহার করুন this.selectedIndex।

সম্পাদনা করুন: আপনাকে প্রথমে বিকল্প উপাদানটি পেতে হবে এবং তারপরে অভ্যন্তরীণ এইচটিএমএল ব্যবহার করতে হবে।

this.textপরিবর্তে ব্যবহার করুন this.selectedIndex।

Comments

এটা ভুল. এটা তোলে grap হবে innerHTMLএর <select>উপাদান।

— ভিজিওএন

Answer 7

 <select class="cS" onChange="fSel2(this.value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS1" onChange="fSel(options[this.selectedIndex].value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select><br>

 <select id="iS2" onChange="fSel3(options[this.selectedIndex].text);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].label);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <script type="text/javascript"> "use strict";
   const s=document.querySelector(".cS");

 // options[this.selectedIndex].value
 let fSel = (sIdx) => console.log(sIdx,
     s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label);

 let fSel2= (sIdx) => { // this.value
     console.log(sIdx, s.options[sIdx].text,
         s.options[sIdx].textContent, s.options[sIdx].label);
 }

 // options[this.selectedIndex].text
 // options[this.selectedIndex].textContent
 // options[this.selectedIndex].label
 // options[this.selectedIndex].innerHTML
 let fSel3= (sIdx) => {
     console.log(sIdx);
 }
 </script> // fSel

তবে:

 <script type="text/javascript"> "use strict";
    const x=document.querySelector(".cS"),
          o=x.options, i=x.selectedIndex;
    console.log(o[i].value,
                o[i].text , o[i].textContent , o[i].label , o[i].innerHTML);
 </script> // .cS"

এবং এটিও:

 <select id="iSel" size="3">
     <option value="one">Un</option>
     <option value="two">Deux</option>
     <option value="three">Trois</option>
 </select>


 <script type="text/javascript"> "use strict";
    const i=document.getElementById("iSel");
    for(let k=0;k<i.length;k++) {
        if(k == i.selectedIndex) console.log("Selected ".repeat(3));
        console.log(`${Object.entries(i.options)[k][1].value}`+
                    ` => ` +
                    `${Object.entries(i.options)[k][1].innerHTML}`);
        console.log(Object.values(i.options)[k].value ,
                    " => ",
                    Object.values(i.options)[k].innerHTML);
        console.log("=".repeat(25));
    }
 </script>

Answer 8

আমি জানি যতদূর দুটি সমাধান রয়েছে।

উভয় যে শুধু ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করা প্রয়োজন

1 টি নির্বাচিত অধ্যায়

সরাসরি নমুনা

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.selectedOptions[0].text;
  log(`option desc`, desc);
});

<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

2 বিকল্প

সরাসরি নমুনা

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.options[select.selectedIndex].text;
  log(`option desc`, desc);
});

<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

---

Answer 9

নীচে চেষ্টা করুন:

myNewFunction = function(id, index) {
    var selection = document.getElementById(id);
    alert(selection.options[index].innerHTML);
};

দেখুন এখানে jsfiddle নমুনা

Comments

সবাই কেন অভ্যন্তরীণ এইচটিএমএলটিতে জিদ দিচ্ছে ??? টেক্সট ব্যবহার করুন! এবং কেন যে সমস্ত স্টাফ ফাংশন পাস। কেবল পাস করুন (এটি) এবং ফাংশনটি কী ব্যবহার করবেন তা স্থির করুন

— এমপি্লুঞ্জন

এহ, আমি মনে করি এটি আরও ভাল / দ্রুত হতে পারে তবে আমি @ এমপ্লুংজানের প্রত্যাখ্যান শুনতে চাই।

— নিক পিকারিং

ইনারএইচটিএমএল মাইক্রোসফ্ট দ্বারা উদ্ভাবিত একটি সুবিধা পদ্ধতি। এরপরে এটি আরও ব্রাউজারে অনুলিপি করা হয়েছিল, তবে যেহেতু এটি মানক নয় এবং খ) কোনও বিকল্পে আপনার এইচটিএমএল থাকতে পারে না যখন কোনও বিকল্পে। মান এবং .text থাকে তখন সমস্যাটি বিভ্রান্ত করার দরকার নেই

— এমপি্লুংজান

innerHTMLযদিও এটি খুব সুবিধাজনক ... আমি তার জন্য সমস্ত মান এবং সরলতার ত্যাগ করতে ইচ্ছুক। : পি

— নিক পিকারিং

ব্যক্তিগতভাবে আমি খাঁটি জেএস এর সাথে jQuery এবং .innerHTML এর সাথে টেক্সট () ব্যবহার করি এবং কেবল অভ্যাস অনুসারে ফ্রেমওয়ার্কগুলিকে মিশ্রিত করার সময় ভুলগুলি এড়াতে সহায়তা করি। আমি জানি যে সমস্ত ব্রাউজারগুলিতে ইনারএইচটিএমএল কাজ করে এবং এটি আমাকে খুশি করে তোলে :) ওহ এবং আমি উভয় ফাংশন পরামিতি নির্দিষ্ট করেছিলাম যাতে ওপি আমার সমাধানের সাথে আরও সহজভাবে সম্পর্কযুক্ত করতে পারে, অন্য কোনও কারণ নয়।

— এরিকসগ