如何使用 Jquery 隐藏选项隐藏表行

如何解决如何使用 Jquery 隐藏选项隐藏表行

我一直在学习 JQuery。以下代码旨在根据 <option value> 的 <select id = "changeId"> 添加和更改下拉选项， 这是“父”更改功能。

我想在没有 css 的情况下隐藏表 2。我可以用 css 隐藏，但我想使用 jquery 的隐藏选项，因为我已经读到我可以像这样隐藏任何表格行。 $('.tableClass tr[id="tablerow_2"]').hide();

如何在不使用任何 css 仅 Jquery 的情况下让下面的小提琴工作/隐藏？基本上我想从隐藏苹果开始，然后继续隐藏所有三个。

小提琴：https://jsfiddle.net/wj_fiddle_playground/57rzfm9o/6/

Javascript

<script>
$(document).ready(function(){
$("#changeId").change(function(){
  var optionValue = $(this).val();

        //css Works
        <!--$('.exampleCSS').hide();-->
   
        //not working
        //$('#tablerow_2').hide();

        //not working
        //$('.tableClass tr[id="tablerow_2"]').hide();

   if(optionValue){
    $(`#${optionValue}`).show();
   }
}).change();
});
</script>

HTML

<table class = "tableClass">
  <tr id = "tablerow_1">
    <select id = "changeId">
    <option value="">-- Please Select --</option>
    <option value="appleValue">Apple</option>
    <option value="bananaValue">Banana</option>  
    <option value="orangeValue">Orange</option>  
    </select>
  </tr>

  <tr id = "tablerow_2">
    <select id = "appleValue" <!--class="exampleCSS"-->>
    <option value="1">Red DelicIoUs</option>
    <option value="2">Granny Smith</option>  
    </select>
  </tr>

  <tr id="tablerow_3">
    <select id = "bananaValue">
    <option value="1">Plantain</option>
    <option value="2">Dancing Banana</option>
    </select>
  </tr>

  <tr id = "tablerow_4">
    <select id = "orangeValue" >
    <option>Blood</option>
    <option>Navel</option>
    <option>Florida</option>
    </select>
  </tr>
</table>

解决方法

基本上我想从隐藏苹果开始，然后继续隐藏所有三个。

我的建议是使用不带 id 的类，隐藏所有而不是一个一个地选择 id 会容易得多。这就是为什么你的代码没有按预期工作，因为 table > tr > td 你忘了添加<td></td> 一切正常

我在这里的建议

$(document).ready(function(){
$("#changeId").change(function(){
  var optionValue = $(this).val();

        //css Works
        //$('.exampleCSS').hide();
   
        //works
        $('#tablerow_2').hide();

        //works
        $('.tableClass tr#tablerow_2').hide();

   if(optionValue){
    $(`#${optionValue}`).show();
   }
}).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tableClass">
  <tr id = "tablerow_1">
    <td>
      <select id = "changeId">
        <option value="">-- Please Select --</option>
        <option value="appleValue">Apple</option>
        <option value="bananaValue">Banana</option>  
        <option value="orangeValue">Orange</option>  
      </select>
    </td>
  </tr>
  
  <tr id="tablerow_2">
    <td>
      <select id = "appleValue" >
       <option value="1">Red Delicious</option>
      <option value="2">Granny Smith</option>   
      </select>
    </td>
  </tr>
  
  <tr id="tablerow_3">
    <td>
      <select id = "bananaValue">
        <option value="1">Plantain</option>
        <option value="2">Dancing Banana</option>
      </select>
    </td>
  </tr>
  
  <tr id = "tablerow_4">
    <td>
      <select id="orangeValue" >
        <option>Blood</option>
        <option>Navel</option>
        <option>Florida</option>
      </select>
    </td>
  </tr>
</table>