পরিবর্তন থেকে সিলেক্ট থেকে নির্বাচিত মান / পাঠ্য পান

Question

<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

আমার জাভাস্ক্রিপ্টে নির্বাচিত বিকল্পের মান পেতে হবে: নির্বাচিত মান বা পাঠ্য কীভাবে পেতে হয় তা কি কেউ জানেন, দয়া করে এটির জন্য কোনও ফাংশন কীভাবে লিখবেন তা বলুন। আমি অনভিজ্ঞ () ফাংশনটি নির্বাচন করার জন্য নির্ধারণ করেছি যাতে এর পরে আমি কী করব?

Comments

এখানে: স্ট্যাকওভারফ্লো / সিকিউরিটিস / tions০85৮৮০১/২ এবং এখানে: স্ট্যাকওভারফ্লো

— মিকা

আপনি শুধুমাত্র চান valueএর optionযে তারপর নির্বাচন করা হয়েছিল ... <select onchange="window.alert(this.value);">... optionগুলি ... </select>... আগে ঠিক যে কিছুই আরো পাওয়া উচিত।

— S0AndS0

Answer 1

এর জন্য জাভাস্ক্রিপ্ট বা jQuery ব্যবহার করুন।

জাভাস্ক্রিপ্ট ব্যবহার করে

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

JQuery ব্যবহার করে

$('#select_id').change(function(){
    alert($(this).val());
})

Comments

.value () আধুনিক ব্রাউজারগুলিতে কাজ করে তবে সত্যিকারের পুরানোগুলিতে নয়। বাইটস

— বেনিসিমো

@ প্লেহার্ডগোপ্রো এটিই নির্বাচিত মান। আপনি যদি পাঠ্যটি চান (যেমন- নির্বাচন- বা যোগাযোগ) আপনি পাঠ্যটি ব্যবহার করবেন: select.textবা jQuery এ select.text()।

— রিক্সেট

সেখানে

— জ্যাকুরি

JQuery ব্যবহার করে .এটি $('#select_id option:selected').text()নির্বাচিত বিকল্প নির্বাচন করুন বা নির্বাচন করুন

— পাওলো বোরালহো মার্টিনস

ভ্যানিলা জাভাস্ক্রিপ্ট পদ্ধতির: document.getElementById("select_id").onchange = (evt) => { console.log(evt.srcElement.value); }

— স্পেন্সার

Answer 2

আপনি যদি এটি গুগল করছেন, এবং ইভেন্ট শ্রোতাদের একটি বৈশিষ্ট্য হিসাবে না চান, ব্যবহার করুন:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 3

function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    alert(x);
}

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

Comments

কি a.valueজন্য? এমন কোনও ব্রাউজার রয়েছে যা আসলে এ জাতীয় সমর্থন করে? আমরা কি শুধু ব্যবহার করতে পারি না a.options[a.selectedIndex].value?

— অজ্ঞাতনামা

@ নামবিহীন <সাব পেতে =)

— এল ডুড

Answer 4

কোনও বিনিময়ের ক্রিয়াকলাপের প্রয়োজন নেই। আপনি এক লাইনে মানটি ধরতে পারেন:

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

বা, আরও ভাল পাঠযোগ্যতার জন্য এটি ভাগ করুন:

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;

Answer 5

বাহ, উত্তরের মধ্যে এখনও সত্যিই পুনরায় ব্যবহারযোগ্য সমাধান নেই .. আমার অর্থ, একটি স্ট্যান্ডার্ড ইভেন্ট হ্যান্ডলারের কেবল একটি eventযুক্তি পাওয়া উচিত এবং আইডিকে মোটেও ব্যবহার করা উচিত নয় .. আমি ব্যবহার করব:

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with value
}

আপনি এই হ্যান্ডলারটি প্রত্যেকটির সাথে ব্যবহার করতে পারেন - ইনলাইন জেএস:

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery:

jQuery('#select_id').on('change',handleSelectChange);

বা ভ্যানিলা জেএস হ্যান্ডলার সেটিংস:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

এবং আপনার প্রতিটি selectউপাদানগুলির জন্য এটি পুনরায় লিখতে হবে না ।

স্নিপেট উদাহরণ:

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

Comments

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

— ভ্যানডাভভি

Answer 6

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

Comments

আপনি যদি তীর ফাংশন নিয়ে কাজ করছেন তবে এই পদ্ধতির সহায়ক is

— ফ্রাঞ্চি

যে কোনও তীর ফাংশন ফাংশন () {with দিয়ে প্রতিস্থাপন করা যেতে পারে, এটি একই জিনিস

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

এটা এক নয়। thisএকটি তীর ফাংশনে এর লেজিকাল পরিবেশ থেকে এর প্রসঙ্গ পাওয়া যায় তবে স্বাভাবিক ক্রিয়াকলাপটির এটির নিজস্ব। পরীক্ষা করে দেখুন এই

— Franchy

Answer 7

ব্যবহার

document.getElementById("select_id").selectedIndex

অথবা মান পেতে:

document.getElementById("select_id").value

Comments

মান পাওয়ার এই

— পদ্ধতিটি

Answer 8

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

সতর্কতায় আপনি নির্বাচিত সূচকের INT মানটি দেখতে পাবেন, নির্বাচনটিকে অ্যারে হিসাবে গণ্য করবেন এবং আপনি মানটি পাবেন

Answer 9

এইচটিএমএল:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

জেএস:

function cityChanged(city) {
    alert(city);
}

Answer 10

আমি অবাক হই যে প্রত্যেকেই এর কাছাকাছি আসার বিকল্প valueএবং textবিকল্প পোস্ট করেছে <option>এবং কেউই পরামর্শ দিয়েছে না label।

তাই আমি labelসমস্ত ব্রাউজার দ্বারা সমর্থিত হিসাবে, খুব প্রস্তাব করছি

পেতে value(অন্যদের পরামর্শ মতো)

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

পেতে option text(যেমন যোগাযোগ বা -নির্বাচিত-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

বা (নতুন পরামর্শ)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

এইচটিএমএল

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText’>Communication</option>
</select>

নোট: জন্য HTML উপরে optionমান 2, labelফিরে আসবে newText পরিবর্তে কমিউনিকেশন

এছাড়াও

দ্রষ্টব্য: ফায়ারফক্সে লেবেল সম্পত্তি সেট করা সম্ভব নয় (কেবল ফেরত)।

Answer 11

এটি একটি পুরানো প্রশ্ন, তবে আমি নিশ্চিত নই কেন লোকেরা আবার ডিওএমের মাধ্যমে অনুসন্ধানের পরিবর্তে তথ্য পুনরুদ্ধারের জন্য ইভেন্ট অবজেক্টটি ব্যবহার করার পরামর্শ দেয়নি।

আপনার ফাংশন অন চেঞ্জের ইভেন্ট ইভেন্টটির মধ্যে দিয়ে যান, উদাহরণস্বরূপ নমুনা দেখুন

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

আজ 7 বছর আগে যদি এটি ডিফল্ট আচরণ না করা হত তবে এটি আজ দেখার জন্য লোকের পক্ষে উপকারী হতে পারে

Answer 12

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

Answer 13

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

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

Answer 14

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

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}

<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>

Comments

কোনও পরিবর্তন নির্বাচন করা ক্যান্সারভুক্ত না হওয়ায় পরিবর্তনের পরিবর্তে ক্লিক ইভেন্টের চেয়ে অনেক ভাল।

— রিলে কার্নি

@ রিলে কার্নি ভাল, এটি নির্ভর করে, জেএস অংশে ফাংশন নাম পরিবর্তনের পরে ইউআই অংশে রিফ্যাক্টরিং কোড পরিবর্তন করার পরিবর্তে এটি আরও মার্জিত এবং বিটিডব্লু আমি কোনও ক্লিকের ইভেন্ট দেখিনি।

আপনি অনক্লিক ইভেন্ট হাহ মুছতে এটি সম্পাদনা করেছেন ited এত ছায়াময়, আপনি ক্লিক করার আগে আপনি যে কারটির জন্য ক্লিক করে তা বিজ্ঞপ্তিটি দিয়েছিল। edited 7 hours agoকমপক্ষে আপনি কোডটি ঠিক করেছেন যা ভাল কাজ করে না।

— রিলে কার্নি