কীভাবে jQuery ব্যবহার করে একাধিক নির্বাচন বাক্সের মান পাবেন?


155

কীভাবে jQuery ব্যবহার করে একাধিক নির্বাচন বাক্সের মান পাবেন?

উত্তর:



291

.val()মাল্টি-সিলেক্ট তালিকায় ফাংশনটি ব্যবহার করা নির্বাচিত মানগুলির একটি অ্যারে প্রদান করবে:

var selectedValues = $('#multipleSelect').val();

এবং আপনার এইচটিএমএলে:

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
আপনি যদি Text 1মান পরিবর্তে পেতে চান ? .val()সঙ্গে প্রতিস্থাপন .text()?
— রাজা আহমেদ

9
লক্ষণীয় যে একাধিক সিলেক্ট nullখালি অ্যারের পরিবর্তে কিছুই নির্বাচিত রিটার্ন সহ নির্বাচন করে । এর অর্থ আপনি যদি ক্রমবর্ধমানভাবে একটি নির্বাচিত মান যুক্ত করেন তবে এটি সঠিক করতে আপনার কিছুটা জাগলিং করতে হবে।
— লিও

ধন্যবাদ! JQuery সহ কোনও উপাদান থেকে মূল্য পাওয়ার জন্য অনেকগুলি উপায় রয়েছে যেটি আপনি যেভাবে সন্ধান করছেন তা অনিবার্যভাবে সংগ্রাম।
— চার্লস উড

5
@ লীও আপনি নাল ইস্যুটি ঘুরে দেখার জন্য একটি কৌলেস্ক যুক্ত করতে পারেন যেমন var selectedValues = $('#multipleSelect').val() || []; এটি লক্ষণীয় যে এটি একটি স্ট্রিংয়ের অ্যারেরও দেয় । আমি একটি পূর্ণসংখ্যার সাথে তুলনা করছি এবং কোনও মিল নেই, তাই আমি একটি যুক্ত করেছি .toString()।
— টেকারউড

16

আপনি জেএস ম্যাপ ফাংশনটিও ব্যবহার করতে পারেন:

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

এবং তারপরে আপনি optionউপাদানটির কোনও সম্পত্তি পেতে পারেন :

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
দুর্দান্ত উত্তর, তবে elপ্রতিটি একক বিকল্পের জন্য jQuery অবজেক্ট হিসাবে মোড়ানোর অতিরিক্ত ব্যয় বহন করার দরকার নেই । খুব অদ্ভুত না হলে কেবল ডম থেকে সরাসরি চলে যান। আপনি ন্যায়বিচার পরিবর্তন $(el).val()করতে পারে el.value। অবশ্যই আপনি যদি jQuery ব্যবহার করেন বা আপনার অন্যান্য উদাহরণের মতো ডেটা বা বৈশিষ্ট্যগুলি ধরতে চান তবে jQuery কাউকেই ক্ষতি করছে না।
— কাইলমিট

1
@ কাইলমিট দুর্দান্ত টিপস লুকানো ক্ষেত্রের মানগুলির সংগ্রহ দখল করতে এই পন্থাটি স্রেফ ব্যবহার করা হয়েছে এবং এটি পুরোপুরি কার্যকর হয়েছে।
— ইভিলড্র

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

তবুও এই সমস্যার আরেকটি উপায়। নির্বাচিত অ্যারে বিকল্প মান হিসাবে সূচকগুলি থাকবে এবং প্রতিটি অ্যারে আইটেমটির মান হিসাবে পাঠ্য থাকবে।

উদাহরণ স্বরূপ

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

যদি বিকল্প 1 এবং 2 নির্বাচন করা হয়।

নির্বাচিত অ্যারে হবে:

selected['abc']=1; 
selected['def']=2.

5

এক লাইন দ্বারা-

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

আউটপুট: ["পাঠ্য 1", "পাঠ্য 2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

আউটপুট: ["মান 1", "মান 2"]

আপনি যদি .join () ব্যবহার করেন

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

আউটপুট: পাঠ্য 1, পাঠ্য 2, পাঠ্য 3


4

এইচটিএমএল কোড:

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

JQuery কোড:

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

আশা করি এটা কাজ করবে


13
"আশা করি এটি কার্যকর হয়" না, যদি আপনি উত্তর না হয়ে নিশ্চিত হন তবে এটি পরীক্ষা করুন এবং নিশ্চিত হন!
— স্টার্লিং আর্চার

6
আপনি যদি উত্তর সম্পর্কে নিশ্চিত না হন তবে পোস্ট করবেন না .. !! আমরা এখানে আশার জন্য নেই .. !! এলএল
— ক্লেইন ডিসিলভা

3
হেই মানুষ. এটি পুরোপুরি কাজ করে। এটা দেখ. আপনার এটি আশা করা উচিত।
— অবাস্তব

2
এটি jQuery এর একটি অদক্ষ ব্যবহার। আইডি $('#multiple').find(':selected')বাছাইকারী হিসাবে এই জাতীয়
— পরিচয়

@ ইউনিসহাহ আমি খুব কমই বলতে চাই যে এটি "অদক্ষ" কারণ সময়ের পার্থক্য আপেক্ষিকতা কিছুই নয় ...
— নরক্যালনকআউট

0

কমা বিভাজক মধ্যে নির্বাচিত মান পান

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.