drop down with checkboxes in django form

Question

Hi I want to have a dropdown list in my django form with a checkbox in front of every option in the drop down. I have tried using multiple choice field with selectmultiple widget but this displays every option with checkboxes on the page. They are not contained inside the drop down. is there a way to contain them inside the dropdown?

Answer 1

I see that you asked this four years ago so I doubt you are still looking for an answer, but I might as well provide in case someone else finds it!

Basically you want to make a div with an unordered list inside of it, where each item in that list contains a checkbox input.

Then, you use jQuery so that when you click on the div, it gets assigned the 'selected' class in its html.

Then you make your CSS so that the dropdown menu itself only shows up when it has the 'selected' class.

The JSFiddle is here (minus the django templating, obviously): https://jsfiddle.net/lymanjohnson/2L71nhko/15/

And code is below:

HTML (django template):

    <fieldset class="item toggle-item">
      <div class="legend-container">
        <legend>Choices</legend>
      </div>
      <ul class="scrollable-dropdown-list">
        {% for choice in choices %}
        <li>
          <input type="checkbox" class="custom-control-input filter" id="choice_{{forloop.counter}}" name="choice" value="{{choice}}">
          <label for="choice_{{forloop.counter}}"class="custom-control-label">{{choice}}</label>
        </li>
        {% endfor %}
      </ul>
    </fieldset>

JQUERY:

    <script>


    $(document).ready(function() {
      // Listener for when you click on the dropdown menu
      $('fieldset.toggle-item > .legend-container').on('click', (event) => {
        // Adds or removes the 'selected' attribute on the dropdown menu you clicked
        $(event.currentTarget).parent().toggleClass('selected')
        // If you have multiple dropdown menus you may want it so that when you open Menu B, Menu A
        // automatically closes.
        // This line does that by removing 'selected' from every dropdown menu other than the one you clicked on.
        // It's 'optional' but it definitely feels better if you have it
        $('fieldset.toggle-item').not($(event.currentTarget).parent()).removeClass('selected')
      })

      // The user is probably going to expect that any and all dropdown menus will close if they click outside of them. Here's how to make that happen:

      //This listens for whenever you let go of the mouse
      $(document).mouseup(function(e)
          {
              // make this a variable just to make the next line a little easier to read
              // a 'container' is now any
              var dropdown_menus = $("fieldset.toggle-item");

              // if the target of the click isn't a dropdown menu OR any of the elements inside one of them
              if (!dropdown_menus.is(e.target) && dropdown_menus.has(e.target).length === 0)
              {
                // then it will de-select (thereby closing) all the dropdown menus on the page
                  $('fieldset.toggle-item').removeClass('selected')

              }
          });
    })

    </script>

CSS:

<style>
    .item {
      width: 33%;
      margin: 2px 1% 2px 1%;
      border: 0;
    }

    .item li {
      list-style: none;
    }

    .scrollable-dropdown-list{
      position: absolute;
      max-height:200px;
      width:33%;
      overflow-y:scroll;
      overflow-x:auto;
      margin: 0;
      padding-left: 1em;
      border-style: solid;
      border-width: thin;
      border-color: grey;
      background-color: white;
    }

    legend {
      margin-bottom: 0;
      font-size: 18px;
    }

    label {
      font-weight: normal;
      margin-left:20px;
    }


    .legend-container {
      cursor: pointer;
      width: 100%;
      display: flex;
      padding: 0;
      margin-bottom: 0px;
      font-size: 21px;
      line-height: inherit;
      color: #333;
      border: 0;
      border-bottom: none;
    }

    fieldset {
      border-width: thin;
      border-color: gray;
      border-style: solid;
      width:50px;
    }

    /* Note that all the browser-specific animation stuff is totally optional, but provides a nice subtle animation for the dropdown effect */

    fieldset ul.scrollable-dropdown-list {
      display: none;
      -webkit-animation: slide-down .3s ease-out;
      -moz-animation: slide-down .3s ease-out;
    }

    fieldset.selected ul.scrollable-dropdown-list {
      display: block;
      -webkit-animation: slide-down .3s ease-out;
      -moz-animation: slide-down .3s ease-out;
    }



    @-webkit-keyframes slide-down {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-10%);
      }
      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
    }

    @-moz-keyframes slide-down {
      0% {
        opacity: 0;
        -moz-transform: translateY(-10%);
      }
      100% {
        opacity: 1;
        -moz-transform: translateY(0);
      }
    }
    </style>

Answer 2

Dropdowns and checkboxes are HTML elements that are rendered by the browser using its built-in components. Those components don't have any support for combining them: in pure HTML, you simply can't combine a select with a check box.

The only way to do this would be to use components rendered purely in Javascript. Google's Closure UI tools is one set of controls I've used, but only because I used to work at Google: something like jQuery UI might have a version that's easier to use.