<সিলেক্ট একাধিক = একাধিক> থেকে সমস্ত নির্বাচিত মান কীভাবে পাবেন?

Question

অদ্ভুত বলে মনে হয়েছে আমি ইতিমধ্যে জিজ্ঞাসা করা এইটিকে দেখতে পেলাম না, তবে এটি এখানে যায়!

আমার এইচটিএমএল নীচে রয়েছে:

<select id="select-meal-type" multiple="multiple">
    <option value="1">Breakfast</option>
    <option value="2">Lunch</option>
    <option value="3">Dinner</option>
    <option value="4">Snacks</option>
    <option value="5">Dessert</option>
</select>

ব্যবহারকারী জাভাস্ক্রিপ্টে নির্বাচিত সমস্ত মান (একটি অ্যারে?) কীভাবে পাব?

উদাহরণস্বরূপ, যদি ব্যবহারকারী মধ্যাহ্নভোজ এবং স্ন্যাক্স নির্বাচন করে থাকে তবে আমি {2, 4} এর অ্যারে চাই}

এটি মনে হচ্ছে এটি খুব সাধারণ কাজ হওয়া উচিত তবে আমি এটিটি করতে পারি না।

ধন্যবাদ।

Comments

একাধিক নির্বাচন থেকে মানগুলি প্রাপ্ত করার

jquery ব্যবহার করে একাধিক নির্বাচন বক্সের মান কীভাবে পাওয়া যায় তার

— জ্যাক

সম্ভাব্য সদৃশ কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি একাধিক নির্বাচন বাক্সের সকল নির্বাচিত মানের পেতে?

— 2540625

Answer 1

স্বাভাবিক উপায়:

var values = $('#select-meal-type').val();

ডক্স থেকে :

<select multiple="multiple">উপাদানগুলির ক্ষেত্রে , .val()পদ্ধতিটি প্রতিটি নির্বাচিত বিকল্প সমেত একটি অ্যারে প্রদান করে;

Comments

@ অগুরোন: আমি কি এটি দাবি করি?

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

@ ফেলিক্সকে আপনি কেবল বিপথগামী করেছেন যিনি সরাসরি বুঝতে পারেন যে তিনি সরাসরি প্রয়োজনের আগেই তাঁর উচিত নয়, তিনি বুঝতে পারেন তার আগেই এটি পুরো jQuery লাইব অন্তর্ভুক্ত করে।

— আমির আফ্রিদি

@ আমিরআফ্রিদি: প্রশ্নটি jQuery এর সাথে ট্যাগ করা হয়েছে। একটি লাইব্রেরির সাথে একটি প্রশ্ন ট্যাগ করার অর্থ সাধারণত ওপেন সেই লাইব্রেরিটি ব্যবহার করে এবং লাইব্রেরির উত্তর তৈরির উত্তরটি স্বাগত। আমি কি আজকে jQuery এ বিকল্প উপায় আইনা দরজাটি প্রস্তাব করব? হতে পারে. তবে এই প্রশ্নটি 3 বছরেরও বেশি পুরানো। অন্যান্য উত্তরের ওপির

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

তুমি ঠিক. প্রশ্নটি jQuery- এর সাথে ট্যাগ করা থাকলে তা বোঝা যায় Aam

— আমির আফ্রিদি

Answer 2

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

রবজি থেকে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একাধিক নির্বাচিত বাক্সের সমস্ত নির্বাচিত মান পাওয়া যায়? :

  function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

Comments

এটি jquery সঙ্গে ট্যাগ।

— কাইল

হা, তা দেখতে

— পাননি

কি হবে selectedOptions? এটি কি ক্রস ব্রাউজার যথেষ্ট নয়? Array.prototype.map.call(el.selectedOptions, function(x){ return x.value })

— টেনব্যাটগুলি

মনে রাখবেন যে যখন কোনও valueবৈশিষ্ট্য নেই, তখন opt.value= opt.text।

— 30:53

অবশেষে! ভ্যানিলা ... আমার প্রিয় গন্ধ

— পেপিরো

Answer 3

প্রকৃতপক্ষে, আমি খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে সবচেয়ে ভাল, সর্বাধিক সংক্ষিপ্ত, দ্রুত এবং সবচেয়ে উপযুক্ত compatible

var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) { 
    return v.value; 
});

আপডেট (2017-02-14):

ES6 / ES2015 (এটি সমর্থন করে এমন ব্রাউজারগুলির জন্য) ব্যবহার করে আরও একটি সুসংগত উপায়:

const selected = document.querySelectorAll('#select-meal-type option:checked');
const values = Array.from(selected).map(el => el.value);

Comments

বিকল্পভাবে, যদি আপনার কাছে উপাদান থাকে:Array.from(element.querySelectorAll("option:checked"),e=>e.value);

— সোমগুইমেনডপি

শুধু এফওয়াইআই, ক্যোয়ারী নির্বাচনকারী সমস্ত ব্যবহার করার চেয়ে বাছাইকৃত বিভাগ / বিকল্প সংগ্রহগুলি ব্যবহার করা আরও দ্রুত।

— অ্যাডাম লেগেট

ধন্যবাদ @ অ্যাডামলেগেট যারা জানে না অবগতির জন্য, যে উপরে @ Someguynamedpie এর কোড করতে পরিবর্তন হবে: Array.from(element.selectedOptions).map(v=>v.value);।

— কাইলফারিস

এটি হবে তবে নীচে আমার উত্তরটি দেখুন - এটি IE তে মোটেও কাজ করে না এবং Chrome এবং ফায়ারফক্সের কিছু পুরানো সংস্করণে অদ্ভুত আচরণ রয়েছে। আপনি যদি পারফরম্যান্সের বিষয়ে চিন্তা না করেন তবে ক্যোয়ারীসিলেক্টরঅল বা ফিল্টারিং এলিমেন্ট.অভিশনগুলি কাজটি সম্পন্ন করে। এছাড়াও, আপনি অ্যারে.ফ্রম () ব্যবহার করার পরিবর্তে [] .map.call () করতে পারেন, আমি জানি না যে এটির পারফরম্যান্সে কী প্রভাব ফেলবে তবে তা অবশ্যই নেতিবাচক হবে না।

— অ্যাডাম লেগেট

ব্যবহৃত checked এটি আমার পক্ষে একাধিক নির্বাচন ড্রপডাউনে কাজ করেছিল তবে সমস্ত ড্রপ-ডাউনের জন্যও কাজ করা উচিত$(".multiple_select > option:checked").each(function(){ console.log(this.value) });

— জোভিওয়ানো ডায়াস

Answer 4

আপনি যদি আধুনিক পথে যেতে চান তবে আপনি এটি করতে পারেন:

const selectedOpts = [...field.options].filter((x) => x.selected);

...অপারেটর iterable (মানচিত্র HTMLOptionsCollectionঅ্যারেতে)।

যদি আপনি কেবল মানগুলিতে আগ্রহী হন তবে আপনি একটি map()কল যুক্ত করতে পারেন :

const selectedValues = [...field.options]
                     .filter((x) => x.selected)
                     .map((x)=>x.value);

Comments

এই উত্তরটি আরও ক্রেডিটের দাবিদার। নিখুঁত সমাধান, ধন্যবাদ!

— সিলভার রিঙ্গভি

Answer 5

প্রথমে অবজেক্টটিকে একটি অ্যারেতে Array.fromরূপান্তর করতে ব্যবহার করুন HTMLCollection।

let selectElement = document.getElementById('categorySelect')
let selectedValues = Array.from(selectElement.selectedOptions)
        .map(option => option.value) // make sure you know what '.map' does

// you could also do: selectElement.options

Answer 6

$('#select-meal-type :selected') নির্বাচিত সমস্ত আইটেমের একটি অ্যারে থাকবে।

$('#select-meal-type option:selected').each(function() {
    alert($(this).val());
});

​

Answer 7

অক্টোবর 2019 আপডেট করুন

নিম্নলিখিতগুলি কোনও নির্ভরতা বা প্রতিস্থাপন ছাড়াই সমস্ত আধুনিক ব্রাউজারগুলিতে "একা একা" কাজ করা উচিত।

<!-- display a pop-up with the selected values from the <select> element -->

<script>
 const showSelectedOptions = options => alert(
   [...options].filter(o => o.selected).map(o => o.value)
 )
</script>

<select multiple onchange="showSelectedOptions(this.options)">
  <option value='1'>one</option>
  <option value='2'>two</option>
  <option value='3'>three</option>
  <option value='4'>four</option>
</select>

Answer 8

এটা চেষ্টা কর:

$('#select-meal-type').change(function(){
    var arr = $(this).val()
});

ডেমো

$('#select-meal-type').change(function(){
  var arr = $(this).val();
  console.log(arr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-meal-type" multiple="multiple">
  <option value="1">Breakfast</option>
  <option value="2">Lunch</option>
  <option value="3">Dinner</option>
  <option value="4">Snacks</option>
  <option value="5">Dessert</option>
</select>

বেহালা

Answer 9

যদি আপনি প্রতিটি মানের বিরতি দিয়ে প্রকাশ হিসাবে চান;

$('#select-meal-type').change(function(){
    var meals = $(this).val();
    var selectedmeals = meals.join(", "); // there is a break after comma

    alert (selectedmeals); // just for testing what will be printed
})

Answer 10

আপনার যদি পরিবর্তনের প্রতিক্রিয়া জানাতে প্রয়োজন হয় তবে আপনি এটি ব্যবহার করে দেখতে পারেন:

document.getElementById('select-meal-type').addEventListener('change', function(e) {
    let values = [].slice.call(e.target.selectedOptions).map(a => a.value));
})

[].slice.call(e.target.selectedOptions)কারণ প্রয়োজন হয় e.target.selectedOptionsআয় একটি HTMLCollection, একটি Array। সেই কলটি এটিকে রূপান্তরিত করে Arrayযাতে আমরা তারপরে mapফাংশনটি প্রয়োগ করতে পারি , যা মানগুলি বের করে।

Comments

দুঃখজনকভাবে এটি সর্বত্র কাজ করবে না, দেখা যাচ্ছে IE11 এর ক্ষেত্র নির্বাচন করা নেই। নিম্নলিখিতগুলি অবশ্য কাজ করে:Array.prototype.slice.call(field.querySelectorAll(':checked'))

— জেমসদেভ

Answer 11

নীচের মত কিছু আমার পছন্দ হবে:

let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);

এটি সংক্ষিপ্ত, এটি আধুনিক ব্রাউজারগুলিতে দ্রুত এবং আমরা 1% মার্কেট শেয়ার ব্রাউজারগুলিতে দ্রুত কিনা তা আমাদের খেয়াল রাখে না।

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

Answer 12

তুমি ব্যবহার করতে পার selectedOptions

var selectedValues = Array.from(document.getElementById('select-meal-type').selectedOptions).map(el=>el.value);
console.log(selectedValues);

<select id="select-meal-type" multiple="multiple">
    <option value="1">Breakfast</option>
    <option value="2" selected>Lunch</option>
    <option value="3">Dinner</option>
    <option value="4" selected>Snacks</option>
    <option value="5">Dessert</option>
</select>

Answer 13

জ্যাকোয়ারি ছাড়াই সর্বত্র কাজ করে:

var getSelectValues = function (select) {
    var ret = [];

    // fast but not universally supported
    if (select.selectedOptions != undefined) {
        for (var i=0; i < select.selectedOptions.length; i++) {
            ret.push(select.selectedOptions[i].value);
        }

    // compatible, but can be painfully slow
    } else {
        for (var i=0; i < select.options.length; i++) {
            if (select.options[i].selected) {
                ret.push(select.options[i].value);
            }
        }
    }
    return ret;
};

Comments

selectedOptiongsআইই সমর্থিত নয়

— ডাস্টিন পোয়েস্যান্ট