Javascript 如何使用下拉框显示表格

我尝试使用下拉框选项显示两个表

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

但它不起作用。怎么用？ 我需要第一个表来显示加载。（表示第一个表应为默认选择。）

---

有什么解决办法吗

您需要调用

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>

然后使用处理程序注册更改事件处理程序

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
})

演示：

另请阅读：，
演示：

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>

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

请共享相关的html，也请检查控制台，您得到了“未捕获引用错误：更改未定义”错误。如果我需要将表1显示为默认选项，该怎么办？我试过selected=“selected”…它不起作用。是的，谢谢。那很有帮助。请解释一下jquery的功能好吗？
<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>

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