用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功率模式600.130/////
例2循环模式///253//
例3电流模式1000.240/////
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(); }); });


你好，用心完成要求：

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>

无非就是在下拉框的change事件里写。

<select name="" id="id" onchange="selChange()">

function selChange(){
if($("#id").val()==1){
把文本框4，5，6隐藏。
document.getElementById("ks").style.display ='none';
//ks 是文本框的id 。

}
}

列子：你自己直接创建html运行

<html>

职位：<select name="" id="sel" onchange="selChange()">



    <option value="0">1</option>



    <option value="1">2</option>



    <option value="2">3</option>



</select>

<select name="" id="sel2" ></select>

<select name="" id="sel3" ></select>

<select name="" id="sel4" ></select>

<script type="text/javascript">

function selChange(){

    document.getElementById("sel2").style.display = 'none';

    document.getElementById("sel3").style.display = 'none';

    document.getElementById("sel4").style.display = 'none';
}
</script>

</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style>
#tab td {
    width: 70px;
}
#tab input {
    width: 60px;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<table id="tab" border="1">
<tr>
    <td>1</td>
    <td>
        <select name="test">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" style="display: none;" /></td>
    <td><input type="text" style="display: none;" /></td>
    <td><input type="text" style="display: none;" /></td>
</tr>
<tr>
    <td>2</td>
    <td>
        <select name="test">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" style="display: none;" /></td>
    <td><input type="text" style="display: none;" /></td>
    <td><input type="text" style="display: none;" /></td>
</tr>
<tr>
    <td>2</td>
    <td>
        <select name="test">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" style="display: none;" /></td>
    <td><input type="text" style="display: none;" /></td>
    <td><input type="text" style="display: none;" /></td>
</tr>
</table>
<script type="text/javascript">
$(function(){
    $("#tab 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();
    });
});
</script>

</body>
</html>

把这个复制粘贴到

$(function(){ $("#tab 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(); }); });

这个前面就行了