使用jQuery实现动态表单中“其他”选项的条件输入框显示

<hr class="hr-primary" />
<div class="form-row">
    <div class="form-group col-md-2">
        <label>Entrance Exam Name</label>
        <select class="form-control entrance-exam-select" name="entrance_exam_dynamic_id" id="entrance_exam_dynamic_id">
            <option value="">Select Entrance Exam</option>
            <option>JEE</option>
            <option>JEE Adv.</option>
            <option>NEET</option>
            <option>NATA</option>
            <option value="other">其他</option>
        </select>
        <!-- 对应的文本输入框，初始隐藏 -->
        <input type="text" style="display:none;" name="txt-entrance_exam_dynamic_id" id="txt-entrance_exam_dynamic_id" class="form-control other-input-field">
    </div>
</div>

$(document).ready(function() {
    // 假设这是您的动态添加表单的按钮点击事件
    $('#add_ent_button').click(function() {
        var entrance_counter = parseInt($('#entrance_counter').val()) || 0;
        entrance_counter = entrance_counter + 1;
        $('#entrance_counter').val(entrance_counter);

        var html = '';
        html += '<hr class="hr-primary" />';
        html += '<div class="form-row">';
        html += '<div class="form-group col-md-2">';
        html += '<label>Entrance Exam Name</label>';
        // 移除内联 onchange，改用事件委托
        html += '<select class="form-control entrance-exam-select" name="entrance_exam' + entrance_counter + '" id="entrance_exam' + entrance_counter + '">';
        html += '<option value="">Select Entrance Exam</option>';
        html += '<option>JEE</option>';
        html += '<option>JEE Adv.</option>';
        html += '<option>NEET</option>';
        html += '<option>NATA</option>';
        html += '<option value="other">其他</option>';
        html += '</select>';
        // 对应的文本输入框，初始隐藏
        html += '<input type="text" style="display:none;" name="txt-entrance_exam' + entrance_counter + '" id="txt-entrance_exam' + entrance_counter + '" class="form-control other-input-field">';
        html += '</div>';
        html += '</div>';

        // 将生成的HTML添加到某个容器中，例如一个ID为 'form_container' 的div
        $('#form_container').append(html);
    });

    // 1. 下拉菜单的 'change' 事件处理 (事件委托)
    // 监听所有具有 'entrance-exam-select' 类的下拉菜单的改变事件
    $(document).on('change', '.entrance-exam-select', function() {
        var $thisSelect = $(this); // 当前触发事件的 select 元素
        var selectedValue = $thisSelect.val(); // 获取选中的值

        // 查找与当前 select 元素相邻的 input 文本框
        // 假设 input 文本框紧跟在 select 元素之后
        var $relatedInputField = $thisSelect.next('.other-input-field');

        if (selectedValue === 'other') {
            $relatedInputField.show().focus(); // 显示输入框并使其获得焦点
        } else {
            $relatedInputField.hide().val(''); // 隐藏输入框并清空其值
        }
    });

    // 2. 文本输入框的 'blur' 事件处理 (事件委托)
    // 监听所有具有 'other-input-field' 类的文本输入框的失焦事件
    $(document).on('blur', '.other-input-field', function() {
        var $thisInput = $(this); // 当前触发事件的 input 元素

        // 如果输入框的值为空，则隐藏它
        if ($thisInput.val().trim() === '') {
            $thisInput.hide();
            // 可选：如果输入框被隐藏，可以将对应的 select 选项重置为非“其他”值
            // var $relatedSelect = $thisInput.prev('.entrance-exam-select');
            // if ($relatedSelect.val() === 'other') {
            //     $relatedSelect.val(''); // 或设置为默认的第一个选项的值
            // }
        }
    });
});