1

I want to display a certain table when it's selected from the select drop down. This is so far I have got, but it's not working

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>

I don't get why the tables are hidden on pageload and shown when the relevant option is selected.

4

4 回答 4

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>
于 2013-11-12T13:41:04.843 回答
0

这里的问题是在页面加载时选择了默认选项。因此，您的 onchange 处理程序在页面加载时使用“请选择”值触发。这样做是因为它隐藏了所有表格并且document.getElementById('tPleaseSelect')找不到，因此没有显示表格。

于 2013-11-12T13:38:06.787 回答
0

我有一个在页面加载时显示表格的小提琴工作。Then when one of the tables is selected it shows just that table. 除了您缺少 close 之外，您上面的代码工作正常};。

在这里提琴

于 2013-11-12T13:38:18.433 回答
0

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

<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>
于 2013-11-12T13:41:33.153 回答