Question

我想从选择下拉列表中选择某个表格。到目前为止，我已经有了，但它没有用

的javascript;

var opt = document.getElementById('select');

opt.onchange = function() {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';

HTML

<select name="select" id="select">
<option selected="selected" disabled="disabled">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>


<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>

<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>

<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>    

<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>

我不明白为什么这些表在页面加载时会隐藏，并在选择相关选项时显示。

Answer 1

你走了！

HTTP：/ http://jsfiddle.net/tjC59/1/

<body>
    <select name="select" id="select" onchange="changeSelection()"><!--Added the onchange Function -->
        <option value="0">Please Select</option>
        <option value="1">CAT Requests</option>
        <option value="2">Stop Bulk Messages</option>
        <option value="3">PO - Deposit Transfer</option>
        <option value="4">PO - Address Change</option>
    </select>
    <table id="t1">
        <tr>
            <td>Etisalat Number</td>
            <td><input type="text" name="eti_num"/> </td>
        </tr>
        <tr>
            <td>CAT Name</td>
            <td><input type="text" name="cat_name"/> </td>
        </tr>
        <tr>
            <td>Artist Name</td>
            <td><input type="text" name="art_name"/> </td>
        </tr>
        <tr>
            <td>Language</td>
            <td><input type="text" name="lang"/> </td>
        </tr>
    </table>
    <table id="t2">
        <tr>
            <td>Etisalat Number</td>
            <td><input type="text" name="eti_num"/> </td>
        </tr>
        <tr>
            <td>Comment</td>
            <td><input type="text" name="comment"/> </td>
        </tr>
    </table>
    <table id="t3">
        <tr>
            <td>Etisalat Number</td>
            <td><input type="text" name="eti_num"/> </td>
        </tr>
        <tr>
            <td>Amount</td>
            <td><input type="text" name="amt"/> </td>
        </tr>
        <tr>
            <td>Reason to Transfer</td>
            <td><input type="text" name="reason_to_transfer"/> </td>
        </tr>
        <tr>
            <td>Comment</td>
            <td><input type="text" name="comment"/> </td>
        </tr>
    </table>    
    <table id="t4">
        <tr>
            <td>Etisalat Number</td>
            <td><input type="text" name="eti_num"/> </td>
        </tr>
        <tr>
            <td>Customer Name</td>
            <td><input type="text" name="cus_name"/> </td>
        </tr>
        <tr>
            <td>Correct Address</td>
            <td><input type="text" name="corr_name"/> </td>
        </tr>
        <tr>
            <td>Comment</td>
            <td><input type="text" name="comment"/> </td>
        </tr>
    </table>
    <!-- Good Practice - Always put your scripts at the end of the Html Body -->
    <script>
        //When the option is changed 
        var changeSelection = function () {
            //Hide all of the elements
            hideAll();
            //If the select value is > 0 (is valid)
            if (document.getElementById("select").value > 0) {
                //Set the element display to "block" (block is typically the default display type)
                document.getElementById("t" + document.getElementById("select").value).style.display = "block";
            }
        };
        //Function to hide all of the elements
        var hideAll = function () {
            //Loop through the elements
            for (var i = 1; i <= 4; i++) {
                //Hide each one
                document.getElementById("t" + i).style.display = "none";
            }
        };
        //This function automaticaly executes when the page is loaded
        (function () {
            //Hide all of the elements
            hideAll();
        })()
    </script>

Answer 2

这里的问题是在pageload上选择了默认选项。所以你的onchange处理程序在pageload上使用值“Please Select”触发。这样做是因为它隐藏了所有表格并且找不到document.getElementById('tPleaseSelect')，因此没有显示任何表格。

Answer 3

我有一个小提琴工作，在页面加载时显示表格。然后，当选择其中一个表时，它只显示该表。除了错过关闭};之外，您的上述代码工作正常。

Fiddle Here

Answer 4

您可以通过以下代码显示对代码的轻微修改：

<select name="select" id="select" onchange="displayTable();">



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function displayTable() {
        var opt = document.getElementById('select');

        opt.onchange = function () {
            document.getElementById('t1').style.display = 'none';
            document.getElementById('t2').style.display = 'none';
            document.getElementById('t3').style.display = 'none';
            document.getElementById('t4').style.display = 'none';
            document.getElementById('t' + this.value).style.display = '';
        };
    }
</script></head>

使用javascript通过select显示表格

4 个答案: