Jq implementation “display different tables according to the drop-down box”

You can listen for the dropdown and get different values using jquery to make a table show or hiden

Style code

<style type="text/css">


   #selectBoard{
      width: 100px;
      height: 20px;
      text-align: center;
   }

   #selectBoard ul{

      width: 100px;

      background: white;

      position: absolute;

      text-align: center;

      top: -10px;

      left: -10px;

      border-radius: 5px;

      display: none;

   }

   #selectBoard ul li{

      text-align: center;

      list-style: none;

   }

   #selectBoard ul li:hover{background: dodgerblue; } #selectBoard img{position: absolute;

      right: 0;

      top: 0;

      width: 30px;

   }

<li>
   <a class="icon" id="selectBoard">
      <ul style="display: none">

         <li><input type="checkbox" value=0 name="displayField"/>Serial number</li>

         <li><input type="checkbox" value=1 name="displayField" checked="true"/>The name of the</li>

         <li><input type="checkbox" value=2 name="displayField" checked="true"/>describe</li>

         <li><input type="checkbox" value=3 name="displayField" checked="true"/>Creation time</li>

         <li><input type="checkbox" value=4 name="displayField" checked="true"/>Update time</li>

         <li><input type="checkbox" value=5 name="displayField" checked="true"/>The creator</li>

         <li><input type="checkbox" value=6 name="displayField" checked="true"/>modifier</li>

      </ul>
       <span>Fields are shown or hidden</span>
   </a>
</li> 
</style>

Copy the code

Js code

<script type="text/javascript">

   $("#selectBoard").click(function(event){
      let boardHeight = $("#selectBoard").prop('scrollHeight');
      let boardWidth = $("#selectBoard").prop('scrollWidth');
      console.log(boardHeight, "= =", boardWidth);
      var ev = event || window.event;

      // Prevent default events and encapsulation

      if (ev.stopPropagation) {

         ev.stopPropagation();

      }else{

         ev.cancelable = true;

      }

      $("#selectBoard ul").css("display"."block");

   });
   $(window).click(function(){$("#selectBoard ul").css("display"."none");

   });
   $(document).ready(function () {$("#tab1 tr").find("th:eq(0)").hide();
      $("#tab1 tr").find("td:eq(0)").hide();
         $("input[name='displayField']").change(function (){
            if ($(this).prop("checked")) {
               let val = $(this).val();
               $("#tab1 tr").find("th:eq("+val+")").show(0);
               $("#tab1 tr").find("td:eq("+val+")").show(0);
            }else {
               let val = $(this).val();
               let strth = "th:eq("+val+")";
               let strtd = "td:eq("+val+")";
               $("#tab1 tr").find(strth).hide(0);
               $("#tab1 tr").find(strtd).hide(0);
            }
         })
      })

</script>
Copy the code