通过选择一个下拉框的值去触发另一下拉框的值

完整代码

<!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>

　　

posted @ 2024-11-21 17:02  Amy清风  阅读(32)  评论(0)    收藏  举报