你好,用心完成要求:
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>