Using the .val() function on a multi-select list will return an array of the selected values:
var selectedValues = $(“#multipleSelect”).val();
and in your html:
<select id=”multipleSelect” multiple=”multiple”> <option value=”1″>Text 1</option> <option value=”2″>Text 2</option> <option value=”3″>Text 3</option> </select>
what if u want to get Text 1 instead of value? replace .val() with .text()? – Raza Ahmed Sep 6 “13 at 6:17
Worth noting that a multiple select with nothing selected returns null rather than an empty array. This means if you’re programatically adding a selected value, you have a bit of juggling to do to get it right. – Leo May 22 “14 at 16:50
Thank you! There are so many ways to get a value from an element with jQuery that it's inevitably a struggle to find the way that you're looking for. – Charles Wood Jun 13 “14 at 14:59
Leo you can add a coalesc to get around the null issue e.g var selectedValues = $('#multipleSelect').val() || <>; Also worth noting it returns an array of strings. I was comparing to an integer and getting no matches, so i added a .toString(). – tkerwood Jul 27 “16 at 2:05
You can also use js map function:
$(“#multipleSelect :selected”).map(function(i, el) ).get();
And then you can get any property of the option element:
return $(el).text(); return $(el).data(“mydata”); return $(el).prop(“disabled”); etc…
great answer, but no need to pay the extra expense of wrapping el as a jQuery object for every single option. Just go straight off the DOM when it's not too weird. You could change $(el).val() to just el.value. Of course if you're used to jQuery or want to grab data or attributes like your other examples, jQuery isn't hurting anyone. – KyleMit Aug 14 “15 at 20:42
KyleMit Great tip. Just used this approach to grab a collection of hidden field values and it worked perfectly. – EvilDr Jun 19 “17 at 10:32
best answer. thanks – John Cris Mañabo Mar 4 at 5:34
var selected=<>; $(“#multipleSelect :selected”).each(function()); console.log(selected);
Yet another approch to this problem. The selected array will have the indexes as the option values and the each array item will have the text as its value.
Đang xem: Jquery multiple select dropdown
for example
<select id=”multipleSelect” multiple=”multiple”> <option value=”abc”>Text 1</option> <option value=”def”>Text 2</option> <option value=”ghi”>Text 3</option> </select>
if say option 1 and 2 are selected.
the selected array will be :
selected<"abc">=1; selected<"def">=2.
Just by one line-
var select_button_text = $(“#SelectQButton option:selected”) .toArray().map(item => item.text);
Output: <"text1", "text2">
var select_button_text = $(“#SelectQButton option:selected”) .toArray().map(item => item.value);
Output: <"value1", "value2">
If you use .join()
var select_button_text = $(“#SelectQButton option:selected”) .toArray().map(item => item.text).join();
Output: text1,text2,text3
Html Code:
<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 Code:
$(“#multiple :selected”).each(function(i, sel));
Hope it works
Don't "hope it works", if you're not sure if it's the answer, test it and be sure! – Sterling Archer Nov 20 “15 at 14:34
If you are not sure of the answer , then do not post it..!! we are not here for hopes ..!! LOL – Clain Dsilva Dec 3 “15 at 13:16
Hey Man. It works perfectly. Check it out. You should hope it. Don't give irrelevent comment.. – Prabhagaran Dec 17 “15 at 11:19
This is an inefficient usage of jQuery. Better is approach is to preface with an ID selector like this: $('#multiple').find(':selected')
Prabhagaran – cannot_mutably_borrow Jan 18 “18 at 8:29
YounisShah I would hardly say it is "inefficient" as the time difference is relativity nothing… – NorCalKnockOut Feb 27 “18 at 22:36
Get selected values in comma separator
var Accessids = “”; $(“.multi_select .btn-group>ul>li input:checked”).each(function(i,obj) ); Accessids = Accessids.substring(0,Accessids.length – 1); console.log(Accessids);
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.Making statements based on opinion; back them up with references or personal experience.
Xem thêm: Top 3 Cung Hoàng Đạo Khó Gần Nhất, Top 3 Cung Hoàng Đạo Lạnh Lùng Khó Gần Nhất
To learn more, see our tips on writing great answers.
Post Your Answer Discard
By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy
Not the answer you're looking for? Browse other questions tagged jquery multi-select or ask your own question.
How do you remove all the options of a select box and then add one option and select it with jQuery?
Lagrange's equation is form invariant under ANY coordinate transformation. Hamilton's equations are not under ANY phase space transformation. Why? more hot questions
Stack Overflow Questions Jobs Developer Jobs Directory Salary Calculator Help Mobile
Products Teams Talent Advertising Enterprise
Company About Press Work Here Legal Privacy Policy Terms of Service Contact Us Cookie Policy
Stack Exchange
Network Technology Life / Arts Culture / Recreation Science Other
Stack Overflow Server Fault Super User Web Applications Ask Ubuntu Webmasters Game Development
TeX – LaTeX Software Engineering Unix & Linux Ask Different (Apple) WordPress Development Geographic Information Systems Electrical Engineering
Android Enthusiasts Information Security Database Administrators Drupal Answers SharePoint User Experience Mathematica
Salesforce ExpressionEngine® Answers Stack Overflow em Português Blender Network Engineering Cryptography Code Review
Magento Software Recommendations Signal Processing Emacs Raspberry Pi Stack Overflow на русском Code Golf
Stack Overflow en español Ethereum Data Science Arduino Bitcoin Software Quality Assurance & Testing Sound Design
Windows Phone more (28)
Photography Science Fiction & Fantasy Graphic Design Movies & TV Music: Practice & Theory Worldbuilding Video Production
Seasoned Advice (cooking) Home Improvement Personal Finance & Money Academia Law Physical Fitness Gardening & Landscaping
Parenting more (10)
English Language & Usage Skeptics Mi Yodeya (Judaism) Travel Christianity English Language Learners Japanese Language
Chinese Language French Language German Language Biblical Hermeneutics History Spanish Language Islam
Русский язык Russian Language Arqade (gaming) Bicycles Role-playing Games Anime & Manga Puzzling
Motor Vehicle Maintenance & Repair Board & Card Games Bricks Homebrewing Martial Arts The Great Outdoors Poker
Chess Sports more (16)
MathOverflow Mathematics Cross Validated (stats) Theoretical Computer Science Physics Chemistry Biology
Computer Science Philosophy Linguistics Psychology & Neuroscience Computational Science more (10)
Blog Facebook Twitter LinkedIn Instagram
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.3.15.38781