Tips for Automatically Keeping Bootstrap Dropdown Open When Selecting an Option

My bootstrap dropdown features a select box with specific options that I want to keep visible. However, when I click on it, the drop-down closes unexpectedly. How can I prevent the drop-down from closing when clicking on the select box?

Check out this bootply example for reference.

csstwitter-bootstrapbootstrap-4

Answer №1

To prevent event propagation, include the 

onclick="event.stopPropagation();"
attribute in your <select> element.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <select onclick="event.stopPropagation();">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </ul>
</div>

Answer №2

Only two small modifications are needed...

  1. Include the .dropdown class to the .btn-group element
  2. Enclose the select element within a <form> tag

Visit this link for more information.

<div class="btn-group dropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <form>
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>
    </form>  
  </ul>
</div>

Answer №3

Here is an alternative version that does not rely on JavaScript, although it may come with some drawbacks:

<div class="dropdown">
  <a class="btn dropdown-toggle" data-toggle="collapse" data-target="#list">
    Menu
    <span class="caret"></span>
  </a>

  <ul id="list" class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
   </ul>
</div>

DEMO

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

Is the see-through sticky header going to overlay the main banner?

I recently completed developing a client's website using Squarespace. Now, I am looking to design a header that: 1) Initially has a transparent background upon the user's arrival on the page 2) Transitions to a solid background color and sticks ...

javascriptjquerycssnavigationsquarespace

Creating a unique CSS style sheet tailored specifically for Internet Explorer and Microsoft Edge – here's how!

Struggling with internet explorer acting up and causing glitches on my website? Check out my problem here. The Issue: An interactive image on my website is not functioning properly in IE & Edge. The image should expand when hovered over, but glitches ...

htmlcssinternet-explorer

Ways to eliminate spacing between two select boxes?

Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...

htmlcss

Utilize Bootstrap 4's d-print classes to style your form

After creating a form that allows users to submit online or print and mail, I encountered an issue with the printing functionality. When using a simple JavaScript print command and applying the .d-print-none class to hide all elements except the form for p ...

cssbootstrap-4

Creating a visually appealing website with Bootstrap 3

Looking to create a unique HTML design using Bootstrap. So far, this is what I've come up with: Plunker Any suggestions or assistance would be greatly appreciated. ...

htmlcsslayouttwitter-bootstrap-3

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...

javascripthtmlcss

Toggle sidebar: expand/collapse

Looking for some assistance with my website project. I currently have two arrows to open and close the sidebar, but I would like one button to handle both actions instead. Can someone help me edit my code snippet to achieve this? Keep in mind that I am new ...

javascripthtmlcss

Create a variety of colors with a simple click

A form has been created for the footer where clicking on an input causes the text and border-bottom to transition from grey to white. Visit Code Pen HTML: <div class="footer"> <div class="footerContainer"> <form> <inp ...

htmlcssformscss-transitions

Fixed div at the bottom of the page that will stick to the top

Currently, I have a holding page for my website that is functioning as desired. It features some Vegas-style background fades and a simple navigation bar at the bottom fixed to the page with the following CSS: Position: absolute; bottom: 0; You can view ...

javascriptjqueryhtmlcss

Perfecting the Radio Button Selection (because why not?)

Struggling to round the outer corners of three inline squared radio buttons with unique IDs. Need help fixing my CSS syntax - I can get each button to individually round its corners, but not just radio1 and radio3's outer corners. Check out the issue ...

radio-buttoncss

Creating a Fixed Position Layout with Three Columns

Currently in the process of creating a 3-column website template and have been rearranging the divs to improve SEO. The issue I am facing is that the layout looks terrible when it's not fully loaded. Here is how it appears when it's not fully lo ...

htmlcss

Using the ng-app directive value with HTML and CSS can sometimes cause issues and the styles may not apply

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463) <body ng-app=""> It was working fine unt ...

cssangularjsng-app

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

How can I modify the CSS styles or configure the p-menubar from PrimeNg to have it expand from right to left in the responsive version? Currently, when using the classes align-items-center flex justify-content-between, the menu remains stuck to the right e ...

cssangularprimeng

The display: flex property is not being properly implemented in Tailwind CSS for the sm:flex

I have a div with the following styles <div class="hidden sm:visible sm:flex"> .... </div> The sm:visible style is applied like this @media (min-width: 640px) .sm\:visible { visibility: visible; } However, the property disp ...

cssvue.jstailwind-css

Trying to update the +/- icon on an accordion dropdown, however, the local HTML file is not loading the JavaScript file. (Using Bootstrap 4)

I'm completely new to JS and struggling a bit, so please be patient. I've been searching online for a few days now without much luck. I'm using Bootstrap 4 and trying to create an accordion with a +/- icon that changes when expanded or colla ...

javascripttwitter-bootstrapbootstrap-4

Looking to distinguish selected options in a multiple select in AngularJS by making them bold?

When working with Angular, I have a multiple select drop down with options such as Select fruits, Apple, Orange, Banana. How can I make the selected options, like Banana and Apple, appear in bold and change background colors? ...

htmlcssangularjsselect

What is the best way to integrate PHP code within CSS?

I'm working on a script that requires me to add PHP code within a CSS stylesheet. However, when I attempt to do so, nothing seems to happen! Is it even possible to include PHP code in a CSS file? ...

phpcss

Problems with the bottom section

Is there a way to make the middle section extend downwards when the window is resized, keeping the footer at the bottom without overlapping with the content? If anyone has suggestions on how to achieve this, please share! I'm hoping there's a b ...

csspositionfooterextendfixed

Is there a way for me to enable autoplay on the Slice Slider?

I'm struggling to enable autoplay on a slider I have here. Is it possible to quickly set this up in the var settings? I attempted to insert the setInterval(spin, 3000); command before and after the init lines, but it hasn't been successful so fa ...

javascriptcsshtml

Can a Material UI Select element be made unresponsive to hover effects?

When a user hovers over an element, I want to achieve the following functionality: document.getElementById("dropdownCategory").disabled = true; <Tooltip arrow placement="right" title={props.description} > <FormControl id="dro ...

cssreactjsmaterial-ui