Question

这是我的代码我试图显示哪个表与我的列表框匹配例如当我从列表框中选择AIX并按下按钮我想显示table1 当我从列表框中选择linux并按下按钮时我想以table2为例你能帮我解决一下如何为btton编写代码并选择表格

谢谢

<select  name="System" id="System" style="font: 20pt AngsanaUPC "  onkeyup="showHint(this.value)">
  <option value="" style="font: 25pt AngsanaUPC " >Choose system</option>
  <option value="AIX" style="font: 25pt AngsanaUPC " >AIX</option>
  <option value="LINUX" style="font: 25pt AngsanaUPC ">LINUX</option>
  <option value="SOLARIS" style="font: 25pt AngsanaUPC ">SOLARIS</option>
</select>
<button type="submit" class="btn btn-primary" style="font: 20pt AngsanaUPC ">Submit</button></td>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
</table>//table 1...

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2" width="100%">
</table>//table 2....

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example3" width="100%">
</table>// table 3....

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        function clickMe(){

            $("table").hide();
            if($("#list").val()==="AIX"){
                $("#table1").show();
            }else if($("#list").val()==="LINUX"){
                $("#table2").show();
            }else if($("#list").val()==="SOLARIS"){
                $("#table3").show();
            }

        }
    </script>
</head>
<body>
<select id="list">
    <option value="" style="font: 25pt AngsanaUPC " >Choose system</option>
    <option value="AIX" style="font: 25pt AngsanaUPC " >AIX</option>
    <option value="LINUX" style="font: 25pt AngsanaUPC ">LINUX</option>
    <option value="SOLARIS" style="font: 25pt AngsanaUPC ">SOLARIS</option>
</select>
<br/>
<input type="button" id="submit" value="submit" onclick="javascript:clickMe()"/>
<br/>
<table id="table1" style="display:none;"><caption>Table 1</caption></table>
<br/>
<table id="table2" style="display:none;"><caption>Table 2</caption></table>

<br/>
<table id="table3" style="display:none;"><caption>Table 3</caption></table>

</body>
</html>

Answer 2

一种更聪明的方法，可以消除对id =“＃”的需求，还需要一些硬编码管理。

使用数据属性可以更轻松地匹配内容，如果找不到匹配元素，主要用于检查帮助调试。

还使用更多jquery风格的方法，使用$ .on（'click'，function（）{}）;而不是内联脚本标记（随着网站变大，可能会很难管理）

http://api.jquery.com/on/

https://api.jquery.com/click/（速记/便利功能）

https://api.jquery.com/data/#data-html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    
        // A $( document ).ready() block.
        $( document ).ready(function() {
          
            $("#submit").click(function(){

                // hide all switchable-tables
                $(".switchable-table").hide();
                
                // store ref to list element
                var $list = $("#list"); 
              
                // attempt to find the targetted table
                var $table = $(".switchable-table[data-switch-id='"+$list.val()+"']");
                
                // if found, show it
                if($table.length)
                {
                    $table.show();
                }
                // For debug only, can be disabled in production code
                else if($list.val() != "")
                {
                    console.error("no such table with matching data-switch-id as '"+$list.val()+"'", $list);
                }
            });

            

        });
    </script>
    <style type='text/css'>
    .switchable-table{ display:none; }
    </style>
</head>
<body>
<div style='width:auto;margin:10px auto;'>
<select id="list">
    <option value="" style="font: 25pt AngsanaUPC " >Choose system</option>
    <option value="AIX" style="font: 25pt AngsanaUPC " >AIX</option>
    <option value="LINUX" style="font: 25pt AngsanaUPC ">LINUX</option>
    <option value="SOLARIS" style="font: 25pt AngsanaUPC ">SOLARIS</option>
</select>
<input type="button" id="submit" value="submit"/>
</div>
<br/>
<table class="switchable-table" data-switch-id="AIX" ><caption>Table 1</caption></table>

<table class="switchable-table" data-switch-id="LINUX"><caption>Table 2</caption></table>

<table class="switchable-table" data-switch-id="SOLARIS"><caption>Table 3</caption></table>

</body>
</html>

如何使用提交按钮并选择从列表框中显示表格

2 个答案: