DEMO

Question

我有十个不同批次的10个表格，我为用户提供了一个下拉列表，用于选择他们想要查看的批次列表。选择该选项后，将显示相应的批处理表。

所有其他表都应该被隐藏但是在加载页面时。请提供至少3个表格的示例代码。

提前致谢。

Answer 1

使用以下代码。

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>

Answer 2

使用.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;
}

DEMO

Answer 3

<强> 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();
    }
})

FIDDLE DEMO

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

3 个答案:

DEMO