জাভাস্ক্রিপ্ট ব্যবহার করে ড্রপডাউন তালিকায় নির্বাচিত মান পান

Question

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি ড্রপডাউন তালিকা থেকে নির্বাচিত মান পেতে পারি?

আমি নীচের পদ্ধতিগুলি চেষ্টা করেছি, তবে তারা সকলে মানের পরিবর্তে নির্বাচিত সূচকটি ফেরত পাঠিয়েছে:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Comments

ডেমো freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— কোড স্পাই

Answer 1

আপনার যদি এমন একটি নির্বাচিত উপাদান থাকে যা দেখতে এরকম দেখায়:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

এই কোড চলছে:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

করতে চান strUserহতে 2। আপনি আসলে যা চান তা যদি হয় test2তবে এটি করুন:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

কোনটি হবে strUserহতেtest2

Comments

@ আর 11 জি, ব্যবহার করুন onchange:)

— অ্যালেক্সজিয়া

var strUser = e.options[e.selectedIndex].value;কেন শুধু নয়var strUser = e.value ?

— দ্য রেড মটর

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

— রবিজি

আমি var e = document.getElementById("ddlViewBy").value;

— এটির

e.target.options[e.target.selectedIndex].textএখানে সমস্ত

— উত্তরে

Answer 2

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

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

JQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

Comments

আমি অবশ্যই কিছু ভুল করছি কারণ যখন আমি এটি চেষ্টা করি তখন ড্রপ ডাউনে প্রতিটি বিকল্পের পাঠ্য ফিরে আসি।

— কেভিন

এটি আমার পক্ষে বিভিন্নভাবে কাজ করেছিল। $: ( "# ddlViewBy নির্বাচিত") Val () না থাকলে নির্বাচন করেছেন।

— Ruwantha

element.options[e.selectedIndex].valueঅবশ্যই হতে হবেelement.options[element.selectedIndex].value

— ক্রিস্টোফার

তবুও দরকারী - বিভিন্নতা / ভাষা লেখার জন্য আপনাকে ধন্যবাদ! এখন যদি আমি কেবল অফিস জেএস এপিআই ড্রপডাউনটির সমতুল্য জানতাম ...

— সিন্ডি মিস্টার

e.target.options[e.target.selectedIndex].textএখানে সমস্ত

— উত্তরে

Answer 3

var strUser = e.options[e.selectedIndex].value;

এটি সঠিক এবং আপনার মান দেওয়া উচিত। এটা কি তোমার পরে লেখা?

var strUser = e.options[e.selectedIndex].text;

সুতরাং আপনি পরিভাষা সম্পর্কে পরিষ্কার:

<select>
    <option value="hello">Hello World</option>
</select>

এই বিকল্পটি রয়েছে:

• সূচক = 0
• মান = হ্যালো
• পাঠ্য = হ্যালো ওয়ার্ল্ড

Comments

আমি ভেবেছিলাম জাভাস্ক্রিপ্টে "।" মানটি আমার জন্য মান প্রদান করবে তবে কেবল ".পাঠ্য" সেই হিসাবে প্রত্যাবর্তন করবে। দেওয়া উদাহরণস্বরূপ ধন্যবাদ!

— ফায়ার হ্যান্ড

হ্যাঁ - বিকল্পটির মানটি এটির মতোই করুন। সরল - উপরের লোকটিকে তার প্রাথমিক অস্পষ্টতার জন্য আরও কোড লিখতে হবে।

— অ্যান্ড্রু কোপার

e.target.options[e.target.selectedIndex].textএখানে সমস্ত

— উত্তরে

Answer 4

নিম্নলিখিত কোডটি জাভাস্ক্রিপ্ট ব্যবহার করে ইনপুট / নির্বাচনের ক্ষেত্রগুলি থেকে মান পেতে / রাখার সাথে সম্পর্কিত বিভিন্ন উদাহরণ প্রদর্শন করে।

উত্স লিঙ্ক

ওয়ার্কিং জাভাস্ক্রিপ্ট & jQuery এর ডেমো

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

নিম্নলিখিত স্ক্রিপ্টটি নির্বাচিত বিকল্পটির মান পাচ্ছে এবং এটি পাঠ্য বাক্স 1 এ রাখছে

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

নিম্নলিখিত স্ক্রিপ্টটি একটি পাঠ্য বাক্স 2 থেকে একটি মান পাচ্ছে এবং এর মানটি দিয়ে সতর্ক করছে

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

নিম্নলিখিত স্ক্রিপ্ট একটি ফাংশন থেকে একটি ফাংশন কল করছে

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

Comments

onchange=run(this.value)বা (this.text)আরও উপকারী হতে পারে।

— বার্সি

Answer 5

var selectedValue = document.getElementById("ddlViewBy").value;

Comments

এটি অন্তত আধুনিক ব্রাউজারগুলির জন্য সবচেয়ে সহজ সমাধান। ডাব্লু 3 স্কুলগুলিও দেখুন ।

— এরিক কোওপম্যানস

Answer 6

আপনি যদি কখনও ইন্টারনেট এক্সপ্লোরারের জন্য বিশুদ্ধ লিখিত কোড জুড়ে চালনা করেন তবে আপনি এটি দেখতে পাবেন:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

ফায়ারফক্স এট এ উপরেরটি চালানো আপনাকে একটি 'ফাংশন নয়' ত্রুটি দেয় কারণ ইন্টারনেট এক্সপ্লোরার আপনাকে [] এর পরিবর্তে () ব্যবহার করে পালিয়ে যেতে দেয়:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

সঠিক উপায়টি হল বর্গাকার বন্ধনী ব্যবহার করা।

Answer 7

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

যে কোনও ইনপুট / ফর্ম ফিল্ডটি যখন আপনি উপাদানটির ভিতরে থেকে প্রবেশ করছেন তখন একটি "এই" কীওয়ার্ডটি ব্যবহার করতে পারেন। এটি ডোম গাছে একটি ফর্ম সনাক্ত করার এবং তারপরে ফর্মের ভিতরে এই উপাদানটি সনাক্ত করার প্রয়োজনীয়তা দূর করে।

Comments

একটি ব্যাখ্যা ক্রম হবে।

— পিটার মর্টেনসেন

Answer 8

প্রাথমিকভাবে আইডি অ্যাট্রিবিউটের পরিবর্তে NAME বৈশিষ্ট্য সহ কোনও নির্বাচন থেকে মানগুলি অ্যাক্সেস করতে চাইবে। আমরা জানি যে সমস্ত ফর্ম উপাদানগুলির আইডি পাওয়ার আগেও তাদের নামগুলির প্রয়োজন।

সুতরাং, আমি getElementByName()কেবল নতুন বিকাশকারীদের এটি দেখার জন্য সমাধানটি যুক্ত করছি ।

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

ব্যবহারের উদাহরণ getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Comments

আমার_নির্বাচিত_উইথ_নাম_ডিডিএলভিউবি আমার_সিলিট_উইথ_নাম_ডিডিএলভিউবি এর মত একটি অ্যারে যদি কাজ করে না []

— জিউফ

Answer 9

জাভাস্ক্রিপ্ট বা jQuery ব্যবহার করে এটি সম্পন্ন করার দুটি উপায় রয়েছে।

javascript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

অথবা

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

JQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Answer 10

শুধু ব্যবহার

• $('#SelectBoxId option:selected').text(); তালিকাভুক্ত হিসাবে পাঠ্য পেতে

• $('#SelectBoxId').val(); নির্বাচিত সূচক মান পাওয়ার জন্য

Comments

এটি jQuery ব্যবহার করে, যা অপের প্রশ্নের উত্তর দেয় না।

— ডেভিড মেজা

Answer 11

পূর্বের উত্তরগুলি এখনও সম্ভাবনার, কোডটির স্বজ্ঞাততা এবং বনামের ব্যবহারের কারণে উন্নতির জায়গা idছেড়েছে name। কেউ একটি নির্বাচিত বিকল্পের তিনটি ডেটা - এর সূচক নম্বর, এর মান এবং পাঠ্যগুলির একটি পঠনযোগ্য পেতে পারে। এই সাধারণ, ক্রস ব্রাউজার কোডটি তিনটিই করে:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

লাইভ ডেমো: http://jsbin.com/jiwena/1/edit?html , আউটপুট ।

idমেক আপ উদ্দেশ্যে ব্যবহার করা উচিত। কার্যকরী ফর্মের উদ্দেশ্যে, nameএখনও HTML5 এ বৈধ, এবং এখনও ব্যবহার করা উচিত। শেষ অবধি, নির্দিষ্ট স্থানে স্কোয়ার বনাম বৃত্তাকার বন্ধনী ব্যবহারের বিষয়টি মনে রাখবেন। যেমনটি আগেই ব্যাখ্যা করা হয়েছিল, কেবলমাত্র (পুরাতন সংস্করণগুলি) ইন্টারনেট এক্সপ্লোরার সমস্ত স্থানে গোলাকারগুলি গ্রহণ করবে।

Answer 12

JQuery ব্যবহার:

$('select').val();

Answer 13

আর একটি সমাধান হ'ল:

document.getElementById('elementId').selectedOptions[0].value

Answer 14

এটি কীভাবে কাজ করে তার চলমান উদাহরণ:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

দ্রষ্টব্য: ড্রপডাউন পরিবর্তিত হওয়ার সাথে সাথে মানগুলি পরিবর্তন হয় না, যদি আপনার সেই কার্যকারিতা প্রয়োজন হয় তবে একটি অন ক্লিক ক্লিক পরিবর্তন করতে হবে।

Comments

কোডটি ব্যবহারের পরে কীভাবে সতেজ করা দরকার তা প্রদর্শনের জন্য উত্তম উত্তর!

— ব্যবহারকারী যে

Answer 15

আপনি ব্যবহার করতে পারেন querySelector।

যেমন

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

Answer 16

এটি কীভাবে অর্জন করা যায় সে সম্পর্কে আমার কিছুটা ভিন্ন দৃষ্টিভঙ্গি রয়েছে। আমি সাধারণত নিম্নলিখিত পদ্ধতির সাথে এটি করছি (এটি একটি সহজ উপায় এবং যতদূর আমি জানি প্রতিটি ব্রাউজারের সাথে কাজ করে):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

Answer 17

২০১৫ সালে, ফায়ারফক্সে , নিম্নলিখিতগুলিও কাজ করে।

ঙ। বিকল্পগুলি .নির্বাচিত

Answer 18

পূর্ববর্তী উত্তরগুলির সাথে যেতে, আমি এটি ওয়ান-লাইনার হিসাবে এটি করি। এটি নির্বাচিত বিকল্পটির প্রকৃত পাঠ্য পাওয়ার জন্য। ইতিমধ্যে সূচী নম্বর পাওয়ার জন্য ভাল উদাহরণ রয়েছে। (এবং পাঠ্যের জন্য, আমি কেবল এইভাবে দেখাতে চেয়েছিলাম)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

কিছু বিরল দৃষ্টান্তে আপনার প্রথম বন্ধনী ব্যবহারের প্রয়োজন হতে পারে তবে এটি খুব বিরল।

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

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

দুর্ভাগ্যক্রমে এটি এখনও দু'বার উপাদান এনেছে, এটি আদর্শ নয়। এমন একটি পদ্ধতি যা কেবল একবার উপাদানটিকে একবারে দখল করে সেগুলি আরও কার্যকর হবে তবে কোডের এক লাইনের সাথে এটি করার ক্ষেত্রে আমি এখনও এটি বুঝতে পারি নি।

Answer 19

এখানে একটি জাভাস্ক্রিপ্ট কোড লাইন রয়েছে:

var x = document.form1.list.value;

ধরে নিই যে ড্রপডাউন মেনুতে তালিকাটির name="list"নাম দেওয়া হয়েছে এবং নাম বৈশিষ্ট্য সহ একটি ফর্মের অন্তর্ভুক্ত name="form1"।

Comments

ওপি বলেছেন যে তাদের পক্ষে কাজ হয়নি: "আমি নীচের পদ্ধতিগুলি চেষ্টা করেছি তবে তারা মানটির পরিবর্তে নির্বাচিত সূচকটি ফিরিয়ে দেয়: var as = document.form1.ddlViewBy.value;..."

— ব্যবহারকারী যে

Answer 20

querySelectorএটি অর্জন করার জন্য আপনার ব্যবহার করা উচিত । এটি ফর্ম উপাদানগুলির কাছ থেকে মান পাওয়ার উপায়কেও প্রমিত করে।

var dropDownValue = document.querySelector('#ddlViewBy').value;

ফিডল: https://jsfiddle.net/3t80pubr/

Answer 21

আমি জানি না যে আমিই সেই প্রশ্নটি সঠিকভাবে না পেয়েছি, তবে এটি কেবল আমার জন্য কাজ করেছে: আপনার এইচটিএমএলে একটি অনচেঞ্জ () ইভেন্ট ব্যবহার করে, যেমন।

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

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

function sele(){
    var strUser = numberToSelect.value;
}

এটি আপনাকে ক্লিকের জন্য নির্বাচিত ড্রপডাউন যা যা মান দেয় তা দেবে

Answer 22

এটি করার সহজ উপায় হ'ল:

var value = document.getElementById("selectId").value;

Comments

তিনি মানটি না করে নির্বাচিত বাক্সটির দেখানো পাঠ্য চান

— থানাসিস

Answer 23

একটি অন্বেষণ ফাংশনটিতে এটি করার একটি সহজ উপায় এখানে:

event.target.options[event.target.selectedIndex].dataset.name

Comments

সরলতা সম্পর্কে কথা বলা, আমি চিন্তা ছিল এই পরিবর্তে event.target

— খ্রিস্টান Læirbag

Answer 24

শুধু কর: document.getElementById('idselect').options.selectedIndex

তারপরে আপনি 0 থেকে শুরু করে নির্বাচন সূচক মান পাবেন index

Comments

এটি কাজ করছে না

— হুজ্জত নাজারি

Answer 25

চেষ্টা

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

Answer 26

বেশ কয়েকটি বিকল্পের সাথে একটি ড্রপ-ডাউন মেনু তৈরি করুন (আপনি যতগুলি চান!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

আমি কিছুটা হাসিখুশি করেছিলাম। কোড স্নিপেট এখানে:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

হ্যাঁ স্নিপেট কাজ করেছে