Question

我创建了一个5 td或6 td的表。表中的数据是通过3个带有“转到”按钮的下拉菜单生成的。当我在所有三个下拉菜单中设置值时，它将在表中显示结果。但是问题是，如果我没有在下拉菜单的一两个中选择一个值并将其设置为null，则不应在表中显示该列。我正在尝试使用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语句。因此，代码是在ready事件上执行的。

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

Answer 2

在JQuery中，您可以使用element.toggle();

但是可以使用javascript（element.style.display）。

我想我看到了你的问题，你这样写：

document.getElementByClass('select1td').style.display=none; //wrong

要获取具有特定类的元素，您必须这样做：

document.getElementsByClassName('select1td')[index].style.display=none;

选择一个类时，要选择多个元素，即使数组中只有1个元素，也要选择一个元素数组。因此，您必须指定一个索引。请记住，在数组中，索引从0开始（要获取第一个元素，您必须像这样选择索引为0的元素）： document.getElementsByClassName（'select1td'）[0] .style.display = none;

改进！这3个td元素只能有一个类。

<table>
<tr>   
<td class="selecttd"><?php echo $row["name"]; ?></td>
<td class="selecttd"><?php echo $row["course"]; ?></td>
<td class="selecttd"><?php echo $row["reg"]; ?></td>
</table>

然后您选择每个这样的人：

document.getElementsByClassName('selecttd')[0.style.display=none;//for the first one
document.getElementsByClassName('selecttd')[0].style.display=none;//second
document.getElementsByClassName('selecttd')[0].style.display=none;//third

另一个改进！

您可以使用document.querySelector() //这样，您可以选择所有类型的元素，例如通过标签名，类，id，

document.querySelector("td");//select the first td
document.querySelectorAll(".class")[2];//selects the third element from class
document.querySelector("#id");//selects an element by id

您的JavaScript代码可能是：

$(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.querySelectorAll('selecttd')[0].style.display=none;
      }
      if(select2==null){
document.querySelectorAll('selecttd')[1].style.display=none;
      }
      }); 
  </script>

和HTML：

<table>
<tr>   
<td class="selecttd"><?php echo $row["name"]; ?></td>
<td class="selecttd"><?php echo $row["course"]; ?></td>
<td class="selecttd"><?php echo $row["reg"]; ?></td>
</table>

jQuery示例：

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

      if(select1==null){
$('.selecttd')[0].toggle();
      }
      if(select2==null){
$('.selecttd')[1].toggle();
      }
      });

我希望这会有所帮助！祝你好运！

Answer 3

使用JQuery进行隐藏/显示操作将比javascript容易。我还使用JQuery Toggle属性在单击按钮时进行了隐藏/显示。请通过此链接，希望对您有所帮助。 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

Answer 4

您可以尝试以下示例：https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

顺便说一句，不建议再使用mysql *函数。他们已弃用。 改为使用mysqli *。

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

4 个答案: