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

我要开枪，我要离开你的帖子，这对我来说并不是很清楚，但在这里：

//Guessing this is the drop down that makes one row or another visible
<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="cont2"  value=" TEST 2"> TEST 2</option>  
         </select> 
    </td>
</tr>

//So in your script, instead of checking for the existence of options with classes
//cont and cont_1, add an event handler to the above drop down change event
$(document).ready(function(){
    $('#Dropdown_TEST').on('change', function(){
         if($(this).find('option:selected').text().trim() === "TEST 1"){
             //If TEST 1 is the drop down option, show tr with class display
             //and hide tr with class display_1
             $('.display').css('display', 'block');
             $('.display_1').css('display', 'none');
         }else if($(this).find('option:selected').text().trim() === "TEST 2"){
             //If TEST 2 is the drop down option, show tr with class display_1
             //and hide tr with class display
             $('.display').css('display', 'none');
             $('.display_1').css('display', 'block');
         }else{
             //else hide both trs or else comment these out if you don't want to hide them
             $('.display').css('display', 'none');
             $('.display_1').css('display', 'none');
         }
    });
});

Answer 2

$(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>

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

2 个答案: