使用jq实现通过一个select改变选中的其他多个select值
timg.jpg
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#allChecks").click(function() {
if(this.checked) {
$("input[name='check']").each(function() {
this.checked = true;
})
} else {
$("input[name='check']").each(function() {
this.checked = false;
})
}
})
})
</script>
</head>
<body>
<table cellpadding="1px" cellspacing="1px" align="center">
<th>
<tr>
<td><input type="checkbox" id="allChecks"></td>
<td>姓名</td>
<td>年龄</td>
<td>选择</td>
</tr>
</th>
<tbody>
<tr>
<td><input type="checkbox" name="check"></td>
<td>aaa</td>
<td><span>bbb</span></td>
<td>
<select>
<option value="01">01</option>
<option value="02">02</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>aaa</td>
<td><span>bbb</span></td>
<td>
<select>
<option value="01">01</option>
<option value="02">02</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>aaa</td>
<td><span>bbb</span></td>
<td>
<select>
<option value="01">01</option>
<option value="02">02</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>aaa</td>
<td><span>bbb</span></td>
<td>
<select>
<option value="01">01</option>
<option value="02">02</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>aaa</td>
<td><span>bbb</span></td>
<td>
<select>
<option value="01">01</option>
<option value="02">02</option>
</select>
</td>
</tr>
</tbody>
</table><br /><br /> 请选择
<select id="mySelect">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<script>
$("#mySelect").change(function() {
var checks = $("input[name='check']:checked");
if(checks.length <= 0) {
alert("请选择需要更改的项目")
} else {
var val = this.value;
checks.each(function(){
/*this.value = val;*/
var aa = $(this).parent().parent().children();
// var bb = aa.eq(3).children().val(this.value);
aa.eq(3).children().find("option[value='"+val+"']").remove();
var $div = "<option value='"+val+"' selected='selected'>"+val+"</option>";
var bb = aa.eq(3).children().append($div);
})
}
})
</script>
</body>
</html>
效果图
693DB7FB-984B-41CA-98C1-CE42C7BFD331.GIF
这个小功能弄了我一下午了，虽然在实际开发中不会有这种奇怪的需求，但是我就是想解决，一步一步的向目标靠近，果然最终还是让我解决了，通过这个例子也让我更加了解了jq选择器的强大，还是不能害怕问题，不然就永远进步不了！！
网友评论