Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

I'm looking to implement a way to select multiple values from a dropdown menu without using the CTRL key. Currently, I am utilizing Bootstrap CSS for styling.

Here is the code for my dropdown:

  <select multiple class="dropdown-menu">
        <option value="monday">Monday</option>
        <option value="tuesday">Tuesday</option>
        <option value="wednesday">Wednesday</option>
        <option value="thursday">Thursday</option>
        <option value="friday">Friday</option>
        <option value="saturday">Saturday</option>
        <option value="sunday">Sunday</option>
    </select>

Is it possible to select multiple values without using the CTRL key with the help of jQuery or JavaScript?

Additionally, I would like to limit the selection to not more than two or three values. Is this feasible?

Thank you in advance for your assistance.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Here is a method to achieve multi-select without needing to use ctrl click.

$('option').mousedown(function(e) {
e.preventDefault();

$(this).prop('selected', $(this).prop('selected') ? false : true);

alert($("#mySelect :selected").length);//select option selected count
//if($("#mySelect :selected").length==2)
//some stuff
   
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="mySelect">
    <option id="1">Option</option>
    <option id="2">Option</option>
    <option id="3">Option</option>
    <option id="4">Option</option>
</select>

Check out this reference for more information.

Answer №2

$('.dropdown-menu option').on('mousedown', function(event) {
    event.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

Answer №3

If you're looking to enhance dropdown functionality, consider using plugins like "Multiselect" or "chosen". 1. Check out this example of Multiselect plugin in action 2. Explore the features of the Chosen plugin here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js encountering issue with printing an array

Here is the code snippet from my routes file: router.get('/chkjson', function(req, res, next) { req.getConnection(function(err,connection){ var ItemArray = []; var myset = []; var query = connection.query('SELEC ...

javascriptmysqlarraysnode.jsexpress

Trouble with importing scss file in sass and bootstrap collaboration

I am using Sass with Bootstrap 4, and now I'm facing an issue in my Sass folder where I have an app.scss file that includes: @import _customVariables.scss @import node_modules/bootstrap/scss/functions @import node_modules/bootstrap/scss/mixins Howev ...

csssassbootstrap-4

The issue with the page not appearing correctly on IE9 is currently being resolved

I am utilizing bootstrap alongside a bootswatch theme and HTML5 boilerplate to design a webpage. While it appears correctly on Chrome and Firefox, the display is off on IE9 and IE8 mode. However, everything works fine when compatibility mode is enabled in ...

csshtmltwitter-bootstrapinternet-explorer-9bootswatch

The @ViewChild in Angular 2 seems to be unable to detect the BaseChartDirective from the ng2-charts

I'm currently using ng2-charts v1.5.0 and I'm facing an issue with updating the chart data after a click event. Despite following suggestions from other sources, I am unable to get it to work properly. Here is a snippet of my code: <div styl ...

javascriptangulartypescriptng2-charts

What is the best method for creating a loop script within a widget using script?

I am trying to implement a loop within a widget, however, the widget contains an internal script: <!DOCTYPE html> <html><head></head><body> <script> list=["AMAR3","BBDC4", "BEEF3", "BPAN4", "BRFS3", "B3SA3", "CVCB3" ...

javascripthtml

TypeError thrown by Basic TypeScript Class

I'm encountering an issue where TypeScript is throwing a TypeError when trying to use the class Literal from file Classes.tsx in file App.tsx, even though they are in the same file. Strangely, everything works fine on typescriptlang.org/play. // Class ...

javascriptreactjstypescriptwebpack

Utilizing jQuery Ajax to dynamically update PHP session variables

Although this question may have been answered before, I'm struggling to find a solution that fits my specific issue. I am currently developing a website where users can sell their eBay items using the eBay API, which has proven to be quite challenging ...

phpjqueryajax

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

javascriptcsshtml

Using the jQuery attr method to assign values to newly created DOM elements generated by an AJAX request

I have a div on a webpage that undergoes changes through AJAX requests triggered by user interaction with a dropdown menu. When the page first loads, I have a script to disable autocomplete for all text input elements: //Prevent browser autocomplete funct ...

jqueryajaxdomattributes

Error: Axios header not refreshing automatically in React. User must manually refresh the page

After logging in, I want to update the JWT token in the header before redirecting to the home page. Login.tsx ... const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const data = new FormData(event.curr ...

javascriptreactjstypescriptauthenticationaxios

Can you locate the hiding spot of the express-session cookie?

After setting a very short cookie max-age (10 secs) in my express-session, I confirmed that it is working as expected: app.use(session({ secret: 'xxx', resave: false, saveUninitialized: true, cookie: { secure: true, maxAge: 10000 } })); ...

javascriptnode.jsexpressexpress-session

Strategies for sending data to child components in Vue

Within my parent component, I am making an API call and receiving a response. My goal is to pass this response as a prop to a child component in Vue. Below is the snippet of the parent component and the API call: <button class="btn button col-2&quo ...

javascriptvue.jsvuejs2vue-componentvue-props

Angular 2/webpack error: Unable to find require reference

I have integrated an HTML template from a graphic design company into my Angular 2 project using node and webpack. This HTML template includes various scripts like: <script src="js/jquery.icheck.min.js"></script> <script src="js/waypoints. ...

javascriptnode.jsangularwebpack

The styles order definition in the Material-UI production build may vary from that in development

When using material-ui, an issue arises in the production build where the generated styles differ from those in development. The order of the material-ui styles in production does not match the order in development. In DEV, the material-ui styles are defi ...

javascriptreactjsmaterial-uiparceljs

Create a notification menu in Bootstrap using Bootply, which conveniently displays a numerical badge at the top

I am interested in implementing a bootstrap notification menu similar to the one found at this link: http://www.bootply.com/oasBuRC8Kz# However, I would like to add the number of notifications to the upper right corner of the glyphicon. I have gone throug ...

csstwitter-bootstrapglyphicons

Position image/icon within navigation bar

I am currently working on a school project to create a webpage, but I am struggling to align an image/icon with the other buttons in the navbar. Despite my efforts to find a solution through Google searches, I have not been able to resolve this issue. Furt ...

htmlcss

CSS: Apply unique padding to the last element without the use of additional classes

My challenge involves a div housing three images, each about 31% in width. The goal is to have padding between them, with the final image having no right padding so that collectively they match the width of a larger image above. Here's an example... ...

htmlcss

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango

I am having an issue with the <a> element in my bootstrap carousel, as it is displaying a dead link

My carousel has an issue with the anchor tag, causing it to show a dead link. I am unable to hover over it and the link is not functioning when clicked. Everything else seems to be working fine in the div. All files from Bootstrap have been used and no cha ...

csstwitter-bootstrap

What are the best practices for avoiding text wrapping around a DIV?

I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help... Here& ...

htmlcssword-wrap