javascript - 如何根据下拉菜单隐藏/显示 td

Question

我创建了一个有 5 或 6 个 td 的表。表中的数据由 3 个带有 Go 按钮的下拉菜单生成。当我在所有三个下拉列表中设置值时，它会在表格中显示结果。 但问题是，如果我没有在一个或两个下拉列表中选择一个值并将其设置为空，它就不应该向我显示表中的该列。我正在用 javascript 尝试它，但我不知道该怎么做。 这是我的 HTML 代码:

$(document).ready(function() {
  $("#go").click(function() {
    var select1 = document.getElementById("select1").value;
    var select2 = document.getElementById("select2").value;
    var select3 = document.getElementById("select3").value;;
  });

  if (select1 == null) {
    document.getElementByClass('select1td').style.display = none;
  }
  if (select2 == null) {
    document.getElementByClass('select2td').style.display = none;
  }
});

<select id="select1" name="select1" style="width: 190px; display: block;">
  <option selected value="" disabled="disabled">Select an option</option>
  <?php 
    $sql="SELECT DISTINCT name FROM tbl1 ";
            
    $result = mysql_query($sql);

    while ($row = mysql_fetch_array($result)) {
        
        echo "<option  class='name' value=' " . $row['name'] ."'>" . $row['name'] ."</option>";
        }
    ?>
</select>
<label>Lot Name</label>
<select id="select2" name="select2" style="width: 190px; display: block;">
  <option selected value="" disabled="disabled">Select an option</option>
  <?php 
    $sql="SELECT DISTINCT course FROM tbl1 ";
            
    $result = mysql_query($sql);

    while ($row = mysql_fetch_array($result)) {
        
        echo "<option  class='course' value=' " . $row['course'] ."'>" . $row['course'] ."</option>";
        }
    ?>
</select>

<!-- and also a third drop down menu-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="select1td">
      <?php echo $row["name"]; ?>
    </td>
    <td class="select2td">
      <?php echo $row["course"]; ?>
    </td>
    <td class="select3td">
      <?php echo $row["reg"]; ?>
    </td>
</table>

Answer 1

我将您原来的 javascript 代码更改为 jquery。您可以使用 if(myvalue) 检查空值。这是有效的，因为 javascript 会将空字符串的值视为 false。您还可以执行 if(myvalue !== '') 这会检查 myvalue 是否不是空字符串。

您还在 onclick 事件处理程序之外编写了 if 语句。因此，代码在就绪事件上执行。

$(document).ready(function() {
  $("#go").on('click', function() {
    $('#select1').val() ? $('.select1td').show() : $('.select1td').hide();
    $('#select2').val() ? $('.select2td').show() : $('.select2td').hide();
    $('#select3').val() ? $('.select3td').show() : $('.select3td').hide();
  
    /* This is an alternative notation if you prefer this.
    
    if ($('#select1').val()) {
      $('.select1td').show();
    } else {
      $('.select1td').hide();
    }

    if ($('#select2').val()) {
      $('.select2td').show();
    } else {
      $('.select2td').hide();
    }

    if ( $('#select3').val()) {
      $('.select3td').show();
    } else {
      $('.select3td').hide();
    }
    
    */
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
  <option value=''>no value</option>
  <option value='something'>value</option>
</select>

<select id="select2">
  <option value=''>no value</option>
  <option value='something'>value</option>
</select>

<select id="select3">
  <option value=''>no value</option>
  <option value='something'>value</option>
</select>

<button id="go">Go</button>

<table>
  <tr>
    <td class="select1td">select1td</td>
    <td class="select2td">select2td</td>
    <td class="select3td">select3td</td>
  </tr>
</table>