联动checkbox与select控件时选项文本丢失问题求助

核心错误点 #

1. 错误使用prop()方法：$("#test-1").prop("null")、$("#test-1 option:selected").prop("Yes")这类写法不符合jQueryprop()的用法——该方法仅用于设置DOM元素的属性（如checked、selected），不能直接赋值选项值。
2. 破坏原有选项文本：取消勾选复选框时，$("#test-1 option:selected").text("")会清空当前选中选项的文本（比如选中Yes时，会把Yes选项的文本改成空白），导致下拉选项内容丢失。
3. 错误的选中项重置逻辑：重置select时，应该直接选中value="null"的预设选项，而非修改现有选项的内容。

修正后的代码 #

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select <span style="font-weight:600;color:red">YES</span>. Click outside to lose focus.</p>
<div class="test">
    <div>
        Test 1: 
        <select id="test-1" name="test-1">
            <option selected value="null"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
            <option value="Maybe">Maybe</option>
        </select>
    </div>
    <div>
        <br>Test 2:
        <input id="test-2" type="checkbox" name="test-2">
    </div>
</div>

<div id="result">{results appear here}</div>

CSS（无需修改）

.test {
    display: flex;
    flex-direction: column;
    width: 50%;
    line-height: 22px;
}
#test-2 {
    border: 12px solid red;
    padding-left: 25px;
}
#result {
    margin-top: 10px;
}

JavaScript（修正逻辑）

$(function() {
    $("#test-1").blur(function() {
        const selectVal = $(this).val();
        if (selectVal === "Yes" || selectVal === "Maybe") {
            $("#result").html("<p>The SELECT is 'YES' or 'Maybe' and the CHECKBOX is checked. This is intended.<br>Now uncheck CHECKBOX</p>");
            $("#test-2").prop("checked", true);
        } else {
            $("#result").html("<p>The SELECT is 'NO' or empty and the CHECKBOX is unchecked<br>Now SELECT 'YES'</p>");        
            $("#test-2").prop("checked", false);
        } 
    });
});

$(function() {
    $("#test-2").click(function() {
        if ($(this).is(":checked")) {
            $("#result").html("Hello World 3");
            // 若需要勾选复选框时自动选中Yes选项，取消下面注释即可
            // $("#test-1").val("Yes");
        } else {
            $("#result").html("<p>The CHECKBOX is unchecked and the SELECT is reset to empty.</p>");
            // 直接选中预设的空值选项，不修改任何选项文本
            $("#test-1").val("null");
        }
    });
});

关键修正说明 #

• 重置select时，用$("#test-1").val("null")直接选中预设的空值选项，彻底避免修改原有选项文本，解决选项丢失问题。
• 仅在设置复选框选中状态时使用prop("checked", true/false)，移除所有错误的prop()用法。
• 优化提示文本，更准确反映当前交互状态。

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