Question

我有一个选项列表，我想实现它的select all功能。我想要做的就是，如果调用父选项（选项Pa1），则应选择同一类（11）中的所有选项元素。我怎么能在jQuery中做到这一点？

<select multiple="multiple" name="section_1" class="section_1">
    <option value="1" class="11 parent">Option Pa1</option>
    <option value="2"  class="11">Option 2</option>
    <option value="3" class="11">Option 3</option>
    <option value="11" class="11">Option 1</option>
    <option value="22" class="22 parent">Option Pa2</option>
    <option value="33" class="22">Option 3</option>
    <option value="44" class="22">Option 4</option>
</select>

Answer 1

您可以通过课程.parent听取任何选项的点击。

然后是一个更改单击元素的select属性和每个元素的情况，直到 .parent的下一个选项。您可以使用.nextUntil()扩展您的选择，并使用.prop()更改属性：

$('select .parent').on('click', function(){
    $(this).nextUntil('.parent').prop('selected', true);
});

JSFiddle

请确认评论written by Rory - 最终用户通常期望在点击时只选择一个选项，特别是因为没有立即指示，而某些选项是其他人的“父母”。用他的话说; 这种UI设计更适合于复选框：

JSFiddle

Answer 2

如果父选项为clicked，请选择具有相同类别的所有选项，并使用prop将其标记为已选中。注意：我在这里假设这里的父元素只有两个类“parent”，然后是它们与子选项共享的类。如果不是这种情况，则必须使用HTML5 data-*属性约定定义一致的分组属性。

请参阅下面的runnable示例。

$(function() {
  $("select .parent").click(function() {
    var classNm = this.className.replace("parent", "").trim();
    $("option." + classNm).prop("selected", true);
  });
});

select {
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple" name="section_1" class="section_1">
  <option value="1" class="11 parent">Option Pa1</option>
  <option value="2" class="11">Option 2</option>
  <option value="3" class="11">Option 3</option>
  <option value="11" class="11">Option 1</option>
    <option value="99" >Random Value In the Middle</option>
    <option value="11" class="11">Option 5</option>
  <option value="22" class="22 parent">Option Pa2</option>
  <option value="33" class="22">Option 3</option>
  <option value="44" class="22">Option 4</option>
</select>

使用jQuery选择所有选项

2 个答案: