javascript - 仅当下拉元素存在时才显示 tr/td 元素

Question

我试图隐藏 tr/td，并且仅通过在下拉列表中选择正确的 tr/td 来显示。

我尝试遵循，但不起作用。也许有人看出出了什么问题。预先感谢您的帮助。

下拉菜单:

<tr>    
    <td>Dropdown_TEST:</td>
    <td><select required id=" Dropdown_TEST">
               <option value=""></option>
               <option  class="cont" value="TEST 1"> TEST 1</option>
               <option class="cont_1"  value=" TEST 2"> TEST 2</option> 
         </select> 
    </td>
</tr>

示例 1:

<tr class="display">    
    <td>TEST:</td>
    <td><input id="pl" name="pl" type="text" maxlength="50" size="50"></td>
</tr>

示例2

<tr class=" display_1"> 
   <td>TEST 2:</td>
   <td><select required id="platt">
            <option value=""></option>
            <option value="yes, is working"> yes, is working </option>
            <option value="no is not working"> no is not working </option>
       </select> 
   </td>
</tr>

Jquery:

<script>
$(document).ready(function(){
    if($('.cont).length)
        $('.display).show();
});

$(document).ready(function(){
    if($('.cont_1).length)
        $('.display_1).show();
});

</script

非常感谢您的帮助和支持。

Answer 1

$(document).ready(function(){
  //evaluate when the dropdown changes
  $('#Dropdown_TEST').on('change', function(){
    //reset everything to visible
    $('.display, .display_1').show();

    //if you do not have a value, ignore
    if (this.value.trim()) {
      //hide first display if it should not be shown
      if (this.value !== 'TEST 1') {
        $('.display').hide();
      }

      //hide the second display if it should not be shown
      if (this.value !== 'TEST 2') {
        $('.display_1').hide();
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Dropdown_TEST:</td>
    <td>
      <select required id="Dropdown_TEST">
        <option value=""></option>
        <option class="cont" value="TEST 1"> TEST 1</option>
        <option class="cont_1" value="TEST 2"> TEST 2</option>
      </select>
    </td>
  </tr>
  <tr class="display">
    <td>TEST:</td>
    <td><input id="pl" name="pl" type="text" maxlength="50" size="50"></td>
  </tr>
  <tr class="display_1">
    <td>TEST 2:</td>
    <td>
      <select required id="platt">
        <option value=""></option>
        <option value="yes, is working"> yes, is working </option>
        <option value="no is not working"> no is not working </option>
      </select>
    </td>
  </tr>
</table>