jQuery multiselect drop down menu

0 votes

I have a simple html multi select drop down list:

<select id="transactionType" multiple="multiple" size="10">
  <option value="ALLOC">ALLOC</option>
  <option value="LOAD1">LOAD1</option>
  <option value="LOAD2">LOAD2</option>
  <!-- etcetera... -->
</select>

I want to continue to use this list in the event javascript is disabled however with javaScript I would like to render the list as a multi-select drop down list. That is it only shows one item in the list until clicked and then will expand to show x items and provide scrolling, where I can select multiple elements as you would expect while holding shift or ctrl.

New to jQuery was searching the http://jquery.com/ but haven't yet found what I need.

Edit Struts2 users, the selected answer will url encode with [] this causes issues in struts2 the fix however is very easy. Simply open jquery.multiSelect.js and search for "[]" and delete the one instance this is used in a string concatenation. I also am using jQuery 1.4.4 as opposed to the 1.3.2 which came bundled with it and everything works just fine.

May 31, 2022 in JQuery by Edureka
• 13,690 points
2,609 views

1 answer to this question.

0 votes

Show activity on this post.

  • Download jquery.multiselect.
  • Include the jquery.multiselect.js and jquery.multiselect.css files. ...
  • Populate your select input.
  • Add the multiselect. ...
  • You may change the style. ...
  • If you want to repopulate the select, you must refresh it: ...
  • To get the selected values (comma separated)
answered Jun 1, 2022 by Edureka
• 13,690 points

Related Questions In JQuery

0 votes
0 answers

jQuery add class .active on menu

I've got a problem. I want to add ...READ MORE

Jun 10, 2022 in JQuery by gaurav
• 23,260 points
692 views
0 votes
1 answer

Unclear usage of font awesome icons in jquery context menu

<script type="text/javascript"> jQuery(function ($) ...READ MORE

answered Jun 17, 2022 in JQuery by rajatha
• 7,680 points
904 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,316 views
0 votes
1 answer

How to import jQuery UI using ES6/ES7 syntax?

Hii, Add a alias in webpack config: resolve: { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
7,967 views
0 votes
1 answer

How can I implement my own $(document).ready functionality without using jQuery?

Hello @kartik,  There are three options: If script is the last ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
1,733 views
0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
3,111 views
0 votes
1 answer

What is the equivalent of jQuery .hide() to set visibility: hidden

Hello Kartik, There isn't one built in but ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
15,105 views
+1 vote
1 answer

How to check if a jQuery plugin is loaded?

Hello @kartik, for the plugins that doesn't use ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
2,068 views
0 votes
1 answer

jQuery 'input' event

oninput event is very useful to track input ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
2,635 views
0 votes
1 answer

How to change color of SVG image using CSS (jQuery SVG image replacement)?

Edit your SVG file, add fill="currentColor" to ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
22,152 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP