个人中心
gpt4 book ai didi

javascript - 使用 javascript 通过 select 显示表格

转载 作者：行者123 更新时间：2023-11-28 01:49:13 25 4
gpt4 key购买 nike

我想在从选择下拉列表中选择某个表时显示该表。这是到目前为止我所得到的，但它不起作用

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>

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

最佳答案

给你!

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>

关于javascript - 使用 javascript 通过 select 显示表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19930475/

25 4 0
文章推荐： html - "Responsive image over responsive image"- 推特 Bootstrap
文章推荐： c++ - 不使用传递值的函数
文章推荐： javascript - 蛇吃食物(HTML5 Canvas 游戏)
文章推荐： c++ - 无法输出到输出文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com