0

在我的 html 页面上，我有一个选择菜单，上面有几个选项。当我选择一个选项时，我希望 html 显示与该选项相关的表格。

例如，当我在选择菜单上选择管理员时，如何显示准确的表格？然后，当我选择工程时，它会隐藏管理表并显示工程表？

         <div class="controls">
             <select id="select01">
                <option id="admin">Admin</option>
                <option id="eng">Engineering</option>
             </select
          </div>

        <div style="display:none" id="admin">
            <table class="table table-bordered table-striped table-hover">
               <thead>
                 <tr>
                     <th>ADMIN</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                    <th>Username</th>
                </tr>
               </thead>
              <tbody>
                  <tr>
                     <td>1</td>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>mdo</td>
                  </tr>
                </tbody>
             </table>
           </div>


        <div style="display:none" id="eng">
            <table class="table table-bordered table-striped table-hover">
               <thead>
                 <tr>
                     <th>Engineering</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                    <th>Username</th>
                </tr>
               </thead>
              <tbody>
                  <tr>
                     <td>1</td>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>mdo</td>
                  </tr>
                </tbody>
             </table>
           </div>

谢谢你。

4

1 回答 1

0

更新

根据您的代码：

$(function () { 
    $("#admin").show();

    $("#select01").on("change", function () {
        $(".myClass").hide();
        $("div[id='" + $(this).val() + "']").show();
    });
});

但首先，解决这个问题：

<select id="select01">
    <option value="admin">Admin</option>
    <option value="eng">Engineering</option>
</select>

和这个：

<div class="myClass" id="admin">
...
</div>

<div class="myClass" id="eng">
...
</div>

并将其添加到您的样式表中：

.myClass
{
    display: none;
}

测试：http: //jsfiddle.net/Du7dJ/2/

于 2013-07-16T15:35:54.510 回答