chen_1311 2019-05-28 19:47 采纳率: 50%
浏览 439
已采纳

用javascript来解决,下拉框和文本框关联的问题

图片说明

希望达到的要求:如图所示

1、如果选择下拉框中的数字“1”和“2”时,他后面的第4、5、6文本框消失,不是文本框内容,指的是文本框。

2、如果选择下拉框中的数字 “3”时,他后面的第1、2、3文本框消失

我会有十几行,每一行的下拉框都是1、2、3这三个数字,在每一行选择他们时,都是达到同样的关联效果。

#tab5 td { width: 70px; } #tab5 input { width: 60px; }





测试工步设置




















































序号 模式选择 停留时间(s) 斜率(s&#8315¹) 值(kW或A) 循环起启序号 循环结束序号 循环次数 / /
例1 功率模式 60 0.1 30 / / / / /
例2 循环模式 / / / 2 5 3 / /
例3 电流模式 100 0.2 40 / / / / /
1
        <select name="test" style="width:100px;">
            <option value ="1"  selected="selected">功率模式</option>
            <option value ="2">电流模式</option>
            <option value ="3">循环模式</option>
            </select>   
        </td>

        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><button>添加</button></td>
        <td><button>删除</button></td>  
      </tr>
      <tr>
        <td>2</td>
        <td>
            <select name="test"  selected="selected" style="width:100px;">
            <option value ="1"  selected="selected">功率模式</option>
            <option value ="2">电流模式</option>
            <option value ="3">循环模式</option>
            </select>   
        </td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><button>添加</button></td>
        <td><button>删除</button></td>  
      </tr>
      <tr>
        <td>3</td>
        <td>
            <select name="test" style="width:100px;">
            <option value ="1"  selected="selected">功率模式</option>
            <option value ="2">电流模式</option>
            <option value ="3">循环模式</option>
            </select>   
        </td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><input type="text" style="display: none;" style="width:30px;" /></td>
        <td><button>添加</button></td>
        <td><button>删除</button></td>  
      </tr>
  </table>
$(function(){ $("#tab5 select").change(function(event){ var input = $(this).closest("tr").find("input"); input.show(); if ($(this).val()=="3") input.slice(0,3).hide(); else input.slice(3,6).hide(); }); });


  • 写回答

4条回答 默认 最新

  • lllomh 2019-05-29 13:37
    关注

    你好,用心完成要求:

    1、如果选择下拉框中的数字“1”和“2”时,他后面的第4、5、6文本框消失,不是文本框内容,指的是文本框。

    2、如果选择下拉框中的数字 “3”时,他后面的第1、2、3文本框消失,我会有十几行,每一行的下拉框都是1、2、3这三个数字,在每一行选择他们时,都是达到同样的关联效果。

    复制出来 就可以运行了,完美配你的意愿

    希望采纳我!!!!

    如还有问题尽管问,若回复不及时,请到我主页邮件私信我哟!!!


    图片说明


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用javascript来解决,下拉框和文本框关联的问题 lllomh</title>
    
        <style>
            #tab5 td {
                width: 70px;
                border: solid 1px green
            }
    
            #tab5 input {
                width: 60px;
            }
        </style>
    </head>
    <body>
    
    
    测试工步设置
    
    <table id="tab5">
    
        <tr>
            <td>1</td>
            <td>
                <select name="test" selected="selected" style="width:100px;">
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text"  style="width:30px;"/></td>
            <td><input type="text"  style="width:30px;"/></td>
            <td><input type="text"  style="width:30px;"/></td>
            <td>
                <button>添加</button>
            </td>
            <td>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <select name="test" selected="selected" style="width:100px;">
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text"  style="width:30px;"/></td>
            <td>
                <button>添加</button>
            </td>
            <td>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <select name="test" style="width:100px;">
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text" style="width:30px;"/></td>
            <td><input type="text"  style="width:30px;"/></td>
            <td><input type="text"  style="width:30px;"/></td>
            <td><input type="text"   style="width:30px;"/></td>
            <td>
                <button>添加</button>
            </td>
            <td>
                <button>删除</button>
            </td>
        </tr>
    </table>
    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function () {
            $("#tab5 select").change(function (event) {
                var input = $(this).closest("tr").find("input");
                input.css("border","inherit");
                if ($(this).val() == "3") input.slice(0, 3).css("border","none"); else input.slice(3, 6).css("border","none");
            });
        });
    </script>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥30 基于信创PC发布的QT应用如何跨用户启动后输入中文
  • ¥20 非root手机,如何精准控制手机流量消耗的大小,如20M
  • ¥15 远程安装一下vasp
  • ¥15 自己做的代码上传图片时,报错
  • ¥15 Lingo线性规划模型怎么搭建
  • ¥15 关于#python#的问题,请各位专家解答!区间型正向化
  • ¥15 unity从3D升级到urp管线,打包ab包后,材质全部变紫色
  • ¥50 comsol温度场仿真无法模拟微米级激光光斑
  • ¥15 上传图片时提交的存储类型
  • ¥15 VB.NET如何绘制倾斜的椭圆