如何根据Civil Status选项控制Spouse输入框的显示与隐藏？

嘿，我看了你的代码，发现几个小问题导致功能没法正常跑起来，我帮你修正并优化了一下，让它更靠谱：

先说说问题出在哪 #

1. JavaScript里的条件分支是else if（要带空格哦），你写的elseif是语法错误，会直接导致脚本罢工
2. 脚本里留了个空的$.ajax({})调用，完全没必要，属于冗余代码
3. 页面刚加载的时候，没有根据当前选中的婚姻状态来设置输入框的显示状态，只有切换选项时才会触发，这样编辑页面（$edit为true时）初始状态可能不对

修正后的完整代码 #

HTML部分（只是帮你格式化了一下，结构没变） #

<div class="form-group">
    <label for="civil_status">Civil Status</label>
    <select class="form-control" id="civil_status" name="civil_status">
        @if ($edit)
            <option value="{{ $user->civil_status}}">{{ $user->civil_status }}</option>
        @endif
        <option value="Single">Single</option>
        <option value="Married">Married</option>
        <option value="Widowed">Widowed</option>
        <option value="Divorced">Divorced</option>
    </select>
</div>
<div id="row1_col1_layout_type2" class="content">
    <div class="form-group">
        <label for="spouse">Spouse</label>
        <input type="text" class="form-control" id="spouse" name="spouse" placeholder="Spouse" value="{{ $edit ? $user->spouse : '' }}">
    </div>
</div>

JavaScript部分（修正语法+优化逻辑） #

<script>
// 把显示隐藏逻辑封装成函数，方便重复调用
function toggleSpouseInput() {
    const selectedStatus = $('#civil_status').val();
    // 只有选中Married时显示，其他所有状态都隐藏（更符合实际业务）
    if (selectedStatus === "Married") {
        $('.content').show();
    } else {
        $('.content').hide();
    }
}

// 等页面DOM加载完再执行脚本，避免找不到元素
$(document).ready(function() {
    // 页面刚加载时先执行一次，设置初始状态
    toggleSpouseInput();
    
    // 绑定下拉框的change事件，切换选项时触发
    $('#civil_status').on('change', toggleSpouseInput);
});
</script>

额外优化说明 #

• 把逻辑封装成函数后，不管是初始加载还是切换选项，都能复用同一段代码，减少重复
• 移除了没用的空AJAX请求，让代码更干净
• 调整了逻辑：除了Married之外的所有状态（Single、Widowed、Divorced）都隐藏配偶输入框，这样更贴合实际场景
• 用on('change', ...)替代直接的change()，是jQuery绑定事件的更推荐写法，扩展性更好

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