通过选择一个下拉框的值去触发另一下拉框的值
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过选择一个下拉框的值去触发另一下拉框的值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.product-description {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<select id="type1" onchange="changeType(this)">
<option value=""> ---请选择--- </option>
<option value="1">一般资产</option>
<option value="2" >固定资产</option>
<option value="3">其他</option>
</select>
<select id="type2">
<option value=""> ---请选择--- </option>
<option value="7">柜子</option>
<option value="8" >电脑</option>
<option value="9">其他</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// $(document).ready(function() {
// // 使用 jQuery 设置下拉框的值为 'selectedValue'
// $('#type1').val('2');
// // 可选：触发 change 事件（如果下拉框有绑定的事件处理器）
// $('#type1').trigger('change');
// // 禁用下拉框，使其不可更改
// $('#type1').prop('disabled', true);
// });
function changeType(obj){
var type1Val=$(obj).val();
if(type1Val == '1'){//当选择为“一般资产”时则自动选择“柜子”
// 使用 jQuery 设置下拉框的值为 '7'，柜子的下拉框值时“7”
$('#type2').val('7');
// 可选：触发 change 事件（如果下拉框有绑定的事件处理器）
$('#type2').trigger('change');
// 禁用下拉框，使其不可更改
$('#type2').prop('disabled', true);
}else if(type1Val == '2'){//当选择为“固定资产”时则自动选择“电脑”
// 使用 jQuery 设置下拉框的值为 '8'， 电脑的下拉框值时“8”
$('#type2').val('8');
// 可选：触发 change 事件（如果下拉框有绑定的事件处理器）
$('#type2').trigger('change');
// 禁用下拉框，使其不可更改
$('#type2').prop('disabled', true);
}else if(type1Val == '3'){//当选择为“其他”时则自动选择“其他”
// 使用 jQuery 设置下拉框的值为 '9'， 其他的下拉框值时“9”
$('#type2').val('9');
// 可选：触发 change 事件（如果下拉框有绑定的事件处理器）
$('#type2').trigger('change');
// 禁用下拉框，使其不可更改
$('#type2').prop('disabled', true);
}
}
</script>
</body>
</html>
