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

Question

我创建了一个有 5 或 6 个 td 的表。 表中的数据由 3 个带有 Go 按钮的下拉菜单生成。 当我在所有三个下拉菜单中设置值时，它会在表中显示结果。 但问题是如果我没有在一个或两个下拉列表中选择一个值并将其设置为 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;

当您选择一个类时，您选择了多个元素，即使数组中只有一个元素，也可以选择一个元素数组。 这就是您必须指定索引的原因。 请记住，在数组中索引从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 *。