页面加载及下拉框切换时触发输入框值修改的问题排查

你的代码在select选项切换时能正常执行，但页面加载时不会触发对应逻辑，核心原因是**onchange事件仅在用户手动切换选项时触发**，页面初始化时默认选中的选项不会自动触发该事件。即使把代码包裹在$(document).ready()中，若没有主动调用处理函数，初始状态的逻辑依然不会执行。

解决方案 #

在DOM加载完成后，主动调用一次hotelCheck函数，传入当前的select元素，即可初始化输入框的状态。

修改后的完整代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select onchange="hotelCheck(this);">
    <option value="2">Hotel 1</option>
    <option value="3">Hotel 2</option>
    <option value="4">Hotel 3</option>
    <option value="1" selected>No Hotel</option>
</select>
<input type="text" id="decimal">

<script>
function hotelCheck(that) {
    if (that.value == "1") {
        $('#decimal').val('0.00');
        $("#decimal").prop('disabled', true);
    } else {
        $("#decimal").prop('disabled', false);
    }
}

$(document).ready(function() {
    // 页面加载时主动执行一次，初始化状态
    hotelCheck($('select')[0]);
});
</script>

补充说明 #

如果更倾向于使用jQuery的事件绑定方式替代原生onchange属性，也可以改成以下写法（效果一致）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="hotelSelect">
    <option value="2">Hotel 1</option>
    <option value="3">Hotel 2</option>
    <option value="4">Hotel 3</option>
    <option value="1" selected>No Hotel</option>
</select>
<input type="text" id="decimal">

<script>
$(document).ready(function() {
    function hotelCheck(that) {
        if (that.value == "1") {
            $('#decimal').val('0.00');
            $("#decimal").prop('disabled', true);
        } else {
            $("#decimal").prop('disabled', false);
        }
    }

    // 绑定change事件
    $('#hotelSelect').on('change', function() {
        hotelCheck(this);
    });

    // 初始化触发
    hotelCheck($('#hotelSelect')[0]);
});
</script>

内容的提问来源于stack exchange，提问作者John Higgins