如何根據下拉菜單隱藏/顯示 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 *。