根据下拉框中的值更改文本框背景颜色
Change textbox background colour according to value in dropdown
我有一个表单,每一行都有文本框和下拉框。当我从相对字段的下拉菜单中选择"缺席"时,我想改变该特定行的文本框的背景颜色。我使用的javascript工作良好,但只与第一行:
<script>
function changeBack() {
var inputVal = document.getElementById("attendance_status");
var textbx = document.getElementById("stname");
var textbxsur = document.getElementById("stsurname");
if (inputVal.value == "0") {
textbx.style.backgroundColor = "red";
textbxsur.style.backgroundColor = "red";
}
else{
textbx.style.backgroundColor = "";
textbxsur.style.backgroundColor = "";
}
}
changeBack();
</script>
表是通过php生成的,如下所示:
$query = ("SELECT * FROM `b10_18591250_JC`.`STUDENT` WHERE `ST_GROUP` = $st_group");
$result = mysql_query($query);
while( $row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . "<input name=stid[] readonly type=number class=form-control value=" .$row['ID']." </td>";
echo "<td>" . "<input name=stname id=stname readonly type=text class=form-control value=" .$row['NAME']." </td>";
echo "<td>" . "<input name=stsurname id=stsurname readonly type=text class=form-control value=" .$row['SURNAME']." </td>";
echo "<td>";
echo "<select class=form-control name=attendance_status[] id=attendance_status onchange='changeBack()'>";
echo "<option value=1>Present</option>";
echo "<option value=0>Absent</option>";
echo "</select>";
echo "</td>";
echo "</tr>";
}
下面是一个使用jQuery的示例,可能对你有用:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Status</td>
</tr>
<?php for($i=1; $i<4; $i++) { ?>
<tr>
<td><?= $i ?></td>
<td><?= 'Name'.$i ?></td>
<td><select><option value="p">Present</option><option value="a">Absent</option></select></td>
</tr>
<?php } ?>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').change(function() {
if($(this).val() == 'a') {
$(this).css('background-color','#F00');
$(this).parent().parent().css('background-color','#F00');
} else {
$(this).css('background-color','#FFF');
$(this).parent().parent().css('background-color','#FFF');
}
});
});
</script>
</body>
</html>
由于您正在使用id, id应该是唯一的,它不应该重复,但在您的代码中为每个选择框分配相同的id(在while循环中),因此它将改变具有id attendance_status的元素的第一次出现的样式。在这种情况下,使用class代替id。
使用id是为了优化搜索算法,只要找到具有给定id的元素,它就会停止进一步搜索,因此它不会对其他元素产生任何影响。
将id改为class。当你使用Id时,你的代码只接受第一个元素。
var inputVal = document.getElementsByClassName("attendance_status");
var textbx = document.getElementsByClassName("stname");
var textbxsur = document.getElementsByClassName("stsurname");
相关文章:
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- mouseover和mouseleave文本颜色更改在指令链接中不起作用
- 如何在flash html5画布项目中动态更改文本颜色
- 使用JavaScript淡化文本颜色
- 使用Javascript切换文本颜色
- 我可以使用jqgrid的oncellselect事件根据单元格内容将文本颜色更改为蓝色吗
- 使用jquery更改文本颜色和大小
- 如何使用javascript更改
前色/文本颜色以及boder颜色 - Extjs 树 如何更改子元素的文本颜色
- 选项选定的文本颜色
- JQuery:悬停时文本颜色切换
- 根据覆盖的背景区域的亮度更改文本颜色
- 根据类型更改 jstree 节点文本颜色
- 文本颜色的随机色调不起作用
- 如何在高亮显示时更改文本颜色
- 使用CSS或SVG设置与背景颜色匹配的文本颜色的动画
- Chart.js文本颜色
- 如何更改chardin.js中的文本颜色和样式
- 更改javascript代码段背景和文本颜色
- 如何在安卓网页中更改背景和文本颜色