javascript - 如何使用下拉框显示表格

Question

我正在尝试使用下拉框选项显示两个表格。

我正在使用这个 JS 代码。这是FIDDLE

 function change_tbl(dhi)
           {
                      if(dhi=='')
                     {
                            return;
                     }
                     $('#tbl_div div').css('display','none');
                     $('#'+dhi).css('display','block');
          }

但它不起作用。如何？ 我需要第一个表格在加载时显示。 (意味着第一个表应该是默认选择。) 有什么解决办法吗？

Answer 1

您需要像这样调用onchange()中的函数

<select onchange="change_tbl(this.value)">
    <option value="">select table</option>
    <option value="tb1">table 1</option>
    <option value="tb2">table 2</option>
</select>

演示:Fiddle

此外， fiddle 中还存在一些其他问题，例如

1. 未包含 jQuery
2. 由于 change_tbl 在内联处理程序中使用，因此您需要在全局范围中声明它 - 在左侧面板的第二个下拉列表中选择“No Wrap Head/Body”

---

使用像这样的 jQuery 事件处理程序

<select id="table-select">
    <option value="">select table</option>
    <option value="tb1" selected>table 1</option>
    <option value="tb2">table 2</option>
</select>

然后使用 .change()用于注册更改事件处理程序的处理程序

jQuery(function () {
    $('#table-select').change(function () {
        $('#tbl_div > div').css('display', 'none');
        if (this.value) {
            $('#' + this.value).css('display', 'block');
        }
    }).change(); //this is used to trigger a manual change handler initially so that the state is properly set on page load
})

演示:Fiddle

另请阅读:Document Ready , trigger handler , change() handler , id-selector