Question

您好我想在我的django表单中有一个下拉列表，并在下拉列表中的每个选项前面都有一个复选框。我已尝试使用selectmultiple小部件的多选字段，但这会在页面上显示带有复选框的每个选项。它们不包含在下拉列表中。有没有办法在下拉列表中包含它们？

Answer 1

下拉列表和复选框是浏览器使用其内置组件呈现的HTML元素。这些组件不支持组合它们：在纯HTML中，您只需将选项与复选框组合在一起。

执行此操作的唯一方法是使用纯粹在Javascript中呈现的组件。谷歌的Closure UI工具是我使用过的一组控件，但仅仅因为我曾经在谷歌工作过：像jQuery UI这样的东西可能有一个更容易使用的版本。

Answer 2

我看到您四年前曾问过这个问题，所以我怀疑您还在寻找答案，但是如果有人找到它，我也可能会提供！

基本上，您要创建一个div，其中包含一个无序列表，该列表中的每个项目都包含一个复选框输入。

然后，您使用jQuery，以便当您单击div时，会在html中为其分配“ selected”类。

然后创建CSS，以使下拉菜单本身仅在具有“ selected”类时显示。

JSFiddle在这里（显然，减去django模板）： https://jsfiddle.net/lymanjohnson/2L71nhko/15/

下面是代码：

HTML（Django模板）：

    <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>

下拉django表单中的复选框

2 个答案: