在选择下拉菜单时，必须显示不同的表

On selection of dropdown, diffrent tables must be displayed

本文关键字：显示 选择 下拉菜单      更新时间：2023-09-26

我有10个表，用于10个不同的批，我放置了一个下拉列表，供用户选择他们想要查看的批列表。选择该选项后，将出现相应的批处理表。

所有其他表应该是隐藏的，但当页面加载。请提供至少3个表的样例代码给我。

使用下面的代码

JavaScript: 

 <script type="text/javascript">
  function showForm() {
     var selopt = document.getElementById("ID").value;
      if (selopt ==1) {
           document.getElementByID("f1").style.display = "block";
           document.getElementByID("f2").style.display = "none";
           document.getElementByID("f3").style.display = "none";
         }
     if (selopt==2){
           document.getElementByID("f1").style.display = "none";
           document.getElementByID("f2").style.display = "block";
           document.getElementByID("f3").style.display = "none";
     if (selopt==3){
           document.getElementByID("f1").style.display = "none";
           document.getElementByID("f2").style.display = "none";
           document.getElementByID("f3").style.display = "block";
     }
     </script>

HTML看起来像这样:

<form action = "sample.com" method= "post">
  <select id="ID" onchange = "showForm()">
    First drop down
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
 <div id = "f1" style = "display:none">
   second table
 </div>
  <div id = "f2" style = "display:none">
   third table
 </div>
  <div id = "f3" style = "display:none">
   fourth table
 </div>
</form>

HTML: 

<select>
    <option value="-1"> Select</option>
    <option value="one">one</option>
     <option value="two">two</option>
     <option value="three">three</option>
</select>
<table id="one" class="table">
<tr>
    <td>
        one
    </td>
    </tr>
</table>
<table id="two" class="table">
<tr>
    <td>
        two
    </td>
    </tr>
</table>
<table id="three" class="table">
<tr>
    <td>
        three
    </td>
    </tr>
</table>
JQUERY: 

$('select').change(function(){
    if($(this).val() != "-1")
    {
    $('table.table').hide();
    $('table#'+$(this).val()).show();
    }
})
<<p> 小提琴演示/strong>

使用.toggle()函数

的例子:

$( ".target" ).toggle();

您需要为下拉列表添加一个更改处理程序。在更改时，您将切换与选定元素链接的表。

你的html将是:

<table id='table1'>....</table>
<table id='table3'>....</table>
<table id='table3'>....</table>
//.... etc
<select id='dropdown'>
    <option value='table1'>Show table 1</option>
    <option value='table2'>Show table 2</option>
    <option value='table3'>Show table 3</option>
    //....
</select>

你的jQuery将是:

$("#dropdown").on('change', function () {
    $("table").each(function() { // hide all tables 
        $(this).hide();
    });
    var tableId = $(":selected", this).val(); // get linked table id
    $("table#"+tableId+"").toggle(); // toggle linked table
});

注意，你必须在css中为每个表添加display: none;属性，这样它们就不会在页面加载时显示，toggle()函数将正常工作。

CSS: 

table {
    display: none;
}
<标题>演示
相关文章：