Question

嗨，我在页面上使用了多选下拉菜单。在这里，我试图在检查组时折叠子选项。例如，当我们选中“文案写作”复选框时，其所有子选项都应隐藏。由于列表是动态生成的，因此我不知道如何完成此操作。预先感谢。

$(".group-css").on("click", function() {
  $(this).sibling().hide();
});
$('#privacy').multipleSelect({
  selectAllText: 'Everyone in Project',
  width: 220,
  filter: true,
  minimumCountSelected: 5,
  ellipsis: true,
  placeholder: 'Category',
  position: "bottom"
});

/* Multiple select Checkbox */

.sub-options {
  padding-left: 20px;
}

.ms-parent {
  max-width: 300px;
}

.m-hidden {
  visibility: hidden;
  height: 0px;
}

.single>label {
  margin-bottom: 0px;
}

.single>label>input {
  margin-right: 6px;
}

.single>label>span {
  font-size: 14px;
}

.group>label {
  font-weight: normal !important;
}

.privacy-or>label>input {
  display: none;
}

.privacy-or>label>span {
  display: block;
  text-align: center;
  color: red;
}


/* Multiple select Checkbox ends */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css" rel="stylesheet" />
<div class="container">
  <div class="d-flex mt-3">
    <div class="form-group mr-2 mb-0 privacy-tooltip">
      <select class="" id="privacy" multiple="multiple">
        <option disabled="disabled" class="privacy-or">----- Or -----</option>
        <optgroup label="No Category">
          <option value="pugal" class="sub-options m-hidden">No Category</option>
        </optgroup>
        <optgroup label="Copywriting">
          <option value="1" class="sub-options">Articles</option>
          <option value="2" class="sub-options">Blogposts</option>
          <option value="3" class="sub-options">Guestposts</option>
          <option value="4" class="sub-options">Press Releases</option>
        </optgroup>
        <optgroup label="Link Building">
          <option value="pugal" class="sub-options m-hidden">Link Building</option>
        </optgroup>
        <optgroup label="Miscellaneous">
          <option value="pugal" class="sub-options m-hidden">Miscellaneous</option>
        </optgroup>
        <optgroup label="Rankings">
          <option value="pugal" class="sub-options m-hidden">Rankings</option>
        </optgroup>
        <optgroup label="SEO Implementation">
          <option value="pugal" class="sub-options m-hidden">SEO Implementation</option>
        </optgroup>
        <optgroup label="SEO Plan">
          <option value="pugal" class="sub-options m-hidden">SEO Plan</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

Answer 1

您可以尝试Select2

使用Select2：一个简单的示例。

$("#select-test").select2();
$("body").on('click', '.select2-results__group', function() {
  $(this).siblings().toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
  <select id="select-test" multiple="multiple" style="width:300px">
    <optgroup label="Group 1">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
    </optgroup>
  </select>
</div>

多选下拉菜单-检查optgroup时崩溃

1 个答案: