如何使用下拉框显示表格

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>

但是：ぁzxswい

同样在小提琴中也有很少的其他问题

1. jQuery没有包括在内
2. 由于Fiddle用于内联处理程序，您需要在全局范围内声明它 - 在左侧面板的第二个下拉列表中选择No Wrap Head / Body

---

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

change_tbl

然后使用

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

处理程序注册change事件处理程序

.change()

但是：ぁzxswい

另请阅读：

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

Answer 2

但是：ぁzxswい

HTML：

change() handler

JS：

id-selector