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




html-select (15)

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

যেমন

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

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

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

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

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

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

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

ফায়ারফক্স এট-এ উপরে চলমান আপনাকে একটি 'ফাংশন' ত্রুটি দেবে না কারণ IE আপনাকে পরিবর্তে [] ব্যবহার করার অনুমতি দেয়:

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

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


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

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

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

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

কিছু বিরল ঘটনাগুলিতে আপনাকে বন্ধনীগুলি ব্যবহার করতে হতে পারে তবে এটি খুব বিরল হবে।

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

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

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


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

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


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

var x = document.form1.list.value;

ড্রপডাউন মেনুটি তালিকা name="list" নামে অভিহিত এবং name="form1" নামটির name="form1" ফর্ম1 name="list" সহ একটি ফর্ম অন্তর্ভুক্ত।


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

Sorurce লিঙ্ক

কাজ Demo

 <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>

নির্বাচিত নির্বাচনের মানটি পেতে আপনি selectElement.value ব্যবহার করতে পারেন।

document.getElementById("idOfSelect").value;

var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
  res.textContent = "Selected Value: "+select.value;
});
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>
</p>


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

<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


শুধু ব্যবহার করুন

  • $('#SelectBoxId option:selected').text(); তালিকা হিসাবে টেক্সট পাওয়ার জন্য

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


সাধারণ জাভাস্ক্রিপ্ট:

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").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'
}];

২015 সালে, Firefox নিম্নলিখিতগুলিও কাজ করে।

ঙ। অপশন। নির্বাচন করা সূচক



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

<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>





html-select