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

同样在小提琴中还有其他一些问题，比如

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

使用像

<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

Answer 2

演示： http://jsfiddle.net/4K9hM/3/

<强> HTML

<select id="tt" >
    <option value="">select table</option>
    <option value="tb1">table 1</option>
    <option value="tb2">table 2</option>
</select>
<div id="tbl_div">

    <div id="tb1">
        <table border="1">
            <tr><td>1</td><td>2</td></tr>
            <tr><td>1</td><td>2</td></tr>
        </table>
    </div>

    <div id="tb2">
       <table border="1">
           <tr><td>2</td><td>2</td></tr>
           <tr><td>2</td><td>2</td></tr>
       </table>
    </div>
</div>

<强> JS：

$(document).ready(function(){
        $("#tt").change( function ()
        {
            dhi = $("#tt").val();
             if(dhi=='')
            {
                return;
            }
            $('#tbl_div div').css('display','none');
            $('#'+dhi).css('display','block');
        });
});

如何使用下拉框显示表格

2 个答案: