html中thymeleaf模板,添加页面,判断如果改变下拉框id="xqdmc"的值为1 , 复选框 <div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}"> <label th:each="dict : ${type}" class="check-box"> <input name="fenlei" id="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" > </label> </div> name="fenlei"重置,可选的值为11,12,13,14,15。并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为2 , 复选框 name="fenlei"重置,可选的值为12 ,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为10, 复选框name="fenlei"重置,可选的值为32,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为11, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为12, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。
时间: 2023-07-06 07:04:20 浏览: 86
乐优商城页面静态化thymeleaf的item,html模板页面
您可以在下拉框的 onchange 事件中添加判断语句,根据下拉框的值来改变复选框的选项。以下是示例代码:
```html
<select id="xqdmc" name="xqdmc" onchange="changeOptions()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="10">选项10</option>
<option value="11">选项11</option>
<option value="12">选项12</option>
</select>
<div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}">
<label th:each="dict : ${type}" class="check-box">
<input name="fenlei" id="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" checked>
</label>
</div>
<script>
function changeOptions() {
var xqdmc = document.getElementById("xqdmc").value;
var fenlei = document.getElementById("fenlei");
fenlei.innerHTML = "";
switch (xqdmc) {
case "1":
addOption(fenlei, "11", "选项11", true);
addOption(fenlei, "12", "选项12", true);
addOption(fenlei, "13", "选项13", true);
addOption(fenlei, "14", "选项14", true);
addOption(fenlei, "15", "选项15", true);
break;
case "2":
addOption(fenlei, "12", "选项12", true);
break;
case "10":
addOption(fenlei, "32", "选项32", true);
break;
case "11":
case "12":
addOption(fenlei, "21", "选项21", true);
addOption(fenlei, "22", "选项22", true);
break;
default:
break;
}
}
function addOption(select, value, text, checked) {
var option = document.createElement("option");
option.value = value;
option.text = text;
if (checked) {
option.selected = true;
}
select.appendChild(option);
}
</script>
```
在上述代码中,changeOptions() 函数会根据下拉框的值来改变复选框的选项。每次改变前会先清空原有的选项,然后根据下拉框的值来添加新的选项。其中,addOption() 函数用于添加新的选项,checked 参数用于指定是否默认选中该选项。在 HTML 中,使用 checked 属性来设置复选框的默认选中状态。
阅读全文