首先隐藏，然后使用jQuery根据下拉选择显示多个肢体组 [英] First hide then Show multiple tbody groups based on a dropdown selection using jQuery

问题描述

我试图首先在页面加载时仅显示第一个tbody(在带有thead和多个tbody分组的表中)，然后根据使用jQuery的下拉选择中的更改显示其余的tbody

I an trying to first show only the first tbody (in a table with a thead and multiple tbody grouping) on page load and then show the rest of the tbody based on a change in a dropdown selection using jQuery

这是代码示例.

//here is the custom JS we would like to add
$("#choice").change(function() {
  $("#table tbody tr").hide();
  $("#table tbody tr." + $(this).val()).show('fast');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
  <option>Choose...</option>
  <option value="1Year">1 Year</option>
  <option value="1.25Years">1 Year 3 Months</option>
  <option value="1.5Years">1 Year 6 Months</option>
  <option value="2Years">2 Years</option>
</select>

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>



  <tbody id="1Year">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="1.25Years">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody id="1.5Years">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

我想显示计算器内容的前六个月，并在用户选择下拉菜单中的选项时让用户选择显示表(计算器)其余部分的内容.

I would like Show the first six months of the calculator content and give users the option to display the rest of the table (calculator) content for several years when they select the option on the dropdown.

请协助.

推荐答案

• 按照您说的去做-隐藏tbody而不是trs

  • Start by doing what you say you are doing - hide tbody and not trs

    然后确保ID中没有特殊字符，并且以字母或下划线开头-使用jQuery使您的生活更轻松

    Then make sure there are no special chars in the ID and that it starts with a letter or underscore - it makes your life easier in jQuery

    由于ID需要唯一，因此您可以直接访问它们

    Since IDs need to be unique, you can access them directly

    您也需要在桌子上有一个ID才能做#table tbody

    You do need an ID on the table to do #table tbody too

    还提供选择空白"值

    我将所选内容添加到1年，以便能够在加载时触发更改，以处理"仅显示页面加载时的第一个正文"

    I added selected to the 1year to be able to trigger change on it on load to handle "show only the first tbody on page load"

    我还在表中添加了t2Years

    I also added t2Years to the table

    //here is the custom JS we would like to add
    $("#choice").on("change",function() {
      $("#table>tbody").hide();
      if (this.value) $("#t" + this.value).show('fast');
    }).change();

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="choice">
      <option value="">Choose...</option>
      <option selected value="1Year">1 Year</option>
      <option value="1_25Years">1 Year 3 Months</option>
      <option value="1_5Years">1 Year 6 Months</option>
      <option value="2Years">2 Years</option>
    </select>
    
    <table id="table">
      <thead>
        <tr>
          <th>Table header</th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
    
    
    
      <tbody id="t1Year">
        <tr>
          <td>1 year</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    
      <tbody id="t1_25Years">
        <tr>
          <td>1.25</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    
      <tbody id="t1_5Years">
        <tr>
          <td>1.5</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      <tbody id="t2Years">
        <tr>
          <td>2</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

    这篇关于首先隐藏，然后使用jQuery根据下拉选择显示多个肢体组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！