本文详解如何使用 jQuery 实现 与 的双向联动：当选择“Yes”或“Maybe”时自动勾选复选框；当取消勾选复选框时，下拉框重置为 value="null" 的空选项，且不破坏原有选项文本。
本文详解如何使用 jquery 实现 `
在表单开发中，常需让不同控件保持状态一致。本例中，一个下拉选择框（
- ✅ 当用户从下拉框中选择 "Yes" 或 "Maybe" → 复选框自动勾选；
- ✅ 当用户选择 "No" 或空值（"null"）→ 复选框自动取消勾选；
- ✅ 当用户手动取消勾选复选框 → 下拉框必须回退至 value="null" 的选项（即默认空项），且不能篡改任何 。
原始代码的主要问题在于误用 jQuery 方法：
- $("#test-1").prop("null") 等调用既无意义又易引发副作用（如干扰 DOM 属性解析）；
- $("#test-1 option:selected").text("") 错误地清空了当前选中项的可见文本，导致后续无法正常显示 "Yes" 等文字；
- 使用 .blur() 而非 .change() 响应下拉框变化，不符合语义且易漏触发；
- 重复绑定 $(function(){})，冗余且降低可维护性。
✅ 正确做法是：仅操作 value 和 selected 属性，完全避免修改 。以下为优化后的完整实现：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div>Test 1:
<select id="select">
<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="checkbox" type="checkbox">
</div>
</div>$(function() {
const $select = $('#select');
const $checkbox = $('#checkbox');
// 下拉框变更 → 同步复选框状态
$select.on('change', function() {
const val = $select.val();
$checkbox.prop('checked', ['Yes', 'Maybe'].includes(val));
});
// 复选框变更 → 同步下拉框状态（仅取消勾选时重置）
$checkbox.on('change', function() {
if (!$checkbox.is(':checked')) {
$select.find('option[value="null"]').prop('selected', true);
}
});
});? 关键要点说明：
- 使用 .on('change') 替代 .blur()：确保仅在用户真正做出选择后响应，语义准确、兼容性好；
- 判断逻辑采用 ['Yes','Maybe'].includes(val)，简洁可扩展；
- 重置下拉框时，精准定位 ，而非清空文本或误设 prop("null")；
- 所有操作均基于 value 属性驱动，完全保留 HTML 中定义的
- 单一 $(function(){}) 包裹，提升性能与可读性。
? 进阶提示：
若需支持“勾选复选框时自动设为 Yes”，可在 $checkbox.change 中补充：
if ($checkbox.is(':checked') && $select.val() === 'null') {
$select.val('Yes'); // 触发 change 事件，自动同步 checkbox
}但需注意避免循环触发（当前逻辑已天然规避，因 val('Yes') 不会再次触发 change 除非用户手动操作）。
通过以上实现，你将获得一个健壮、可预测、符合表单最佳实践的双向同步控件对——既满足业务逻辑，又保障用户体验与 DOM 完整性。
