Question

我有一个多选html字段，其中包含类别和与这些类别相关的元素

我希望某人能够选择单个课程，或者如果他们选择一个类别（值以cat_为前缀），那么它应该将以下课程标记为选中，直到找到下一个类别

我尝试了一些尝试，但没有成功

$(document).ready(function() {


  $('#courses').change(function() {

    $(this).nextUntil('option[name^="cat_"]').each().prop("selected", "selected");
    $(this).nextUntil('option[name^="cat_"]').prop("selected", "selected");
    $(this).closest("option").nextAll().each(function() {
      $this.prop("selected", "selected");
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
  <option value="cat_1">data / </option>
  <option value="1">data / Guitar </option>
  <option value="2">data / keyboard </option>
  <option value="cat_2">mandatory / </option>
  <option value="cat_3">fb / </option>
  <option value="3">fb / Node js </option>
  <option value="4">fb / PHP programming </option>
  <option value="5">fb / C# </option>

</select>

Answer 1

您可以检查所选选项startsWith cat_关键字是否正确，如果可以，可以将所有selected选项的nextUntil('option[value^="cat_"]')属性设置为true。

function select(element, callback) {
  element.find('option').on('click', function(event) {
    const selected = $(this);

    if (selected.val().startsWith('cat_')) {
      selected
        .nextUntil('option[value^="cat_"]')
        .prop('selected', true)
    }

    callback(element.val())
  })

}

select($('#courses'), value => {
  console.log(value)
})

select {
  height: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
  <option value="cat_1">data / </option>
  <option value="1">data / Guitar </option>
  <option value="2">data / keyboard </option>
  <option value="cat_2">mandatory / </option>
  <option value="cat_3">fb / </option>
  <option value="2">fb / Node js </option>
  <option value="3">fb / PHP programming </option>
  <option value="4">fb / C# </option>
</select>

Answer 2

您可以递归地遍历兄弟姐妹，检查它们是否是新类别或当前类别的一部分。下面的示例；

**注意：**这适用于多个选择。您还需要反转此逻辑才能取消选择。

let select = document.getElementsByClassName('form-control')[0];

function checkSibling(sibling){
  if(sibling && !sibling.value.includes('cat')) {
    sibling.selected = true;
    checkSibling(sibling.nextElementSibling);
  }
}

select.addEventListener('click', function(event){
  checkSibling(event.target.nextElementSibling);
});

<select class="form-control" name="courses[]" multiple
    id="courses" multiple="true" >
    <option value="cat_1">data / </option>
    <option value="1">data / Guitar </option>
    <option value="2">data / keyboard </option>
    <option value="cat_2">mandatory / </option>
    <option value="cat_3">fb / </option>
    <option value="2">fb / Node js </option>
    <option value="3">fb / PHP programming </option>
    <option value="4">fb / C# </option>

</select>

Answer 3

您可以尝试这样（必须感谢）-

covariant

$(document).ready(function() {
    $('[value^="cat_"]').click(function(){
        $(this).nextUntil('[value^="cat_"]').prop("selected", "selected");

    });
});

如何在多选中选择其余元素

3 个答案: