Question

我需要帮助，我正在编写一个<select>，其中有4个值<option>我希望表格没有可见，然后当我点击选项，显示表格，我该怎么做？

<select name="ejercicio">
  <option value="16">exercise 2016</option>//when click here display a table
  <option value="17">exercise 2017</option>//when click here display other table
  <option value="18">exercise 2018</option>//***
  <option value="19">exercise 2019</option>//***
</select>

Answer 1

您可以尝试获取所选选项的索引，并在您自己的函数中使用它来将表的可见性更改为 true 。

E.g。：你有四个表，除了最后你的名字相同。在那里添加选项的后一个索引，该索引将用于将表设置为可见。在您的函数中，您可以使用表的命名空间并附加所选选项的索引以获取表并设置表的可见性。

我希望它会有所帮助：）

Answer 2

它非常简单只需验证选择值并使用它来显示表格这里是示例

CSS：

.tablecontainer li { display: none; }
.tablecontainer li.show { display: block; }

HTML：

<select name="selectbox">
  <option value="" checked>Select</option> 
  <option value="firsttable">Table 1</option> 
  <option value="sectable">Table 2</option>  
</select>

<ul class="tablecontainer">
 <li id="firsttable">
  <table>
   <tr>
    <td>First table</td>
   </tr>
  </table>
 </li>
<li id="firsttable">
  <table>
   <tr>
    <td>First table</td>
   </tr>
  </table>
 </li>
</ul>

最后Jquery：

$('select').on("change", function(event) {
 event.preventDefault();
 $(".tablecontainer")
  .find("#" + $(this).val())
  .addClass("show")
  .siblings()
  .removeClass("show");
});

我相信它会对你有帮助。

Answer 3

我不确定你在项目中引用JQuery的天气。如果你没有，你可以尝试这样： HTML： HTML CONTENT CSS：

.table-list{
    display:none;
}

JS：

var select = document.getElementById("toggle");
toggle.addEventListener('change',function(){
    var tbs = document.getElementsByClassName('table-list');
for(var i=0;i<4;i++){
    tbs[i].style.display = 'none';
}
var tbName = select.value;
document.getElementById('tbName').style.display = 'block';
});

你可以测试它here is the live demo for you

如何根据选择的值显示表格？

3 个答案: