Bootstrap 4多下拉列表选中指定选项时显示表单元素的功能异常问题

Hey there! The issue you're facing with your second dropdown not triggering the file upload form is actually caused by invalid nested <form> tags in your HTML. Browsers don't allow forms to be nested inside other forms, so they'll automatically "fix" this structure by closing the outer form early—which breaks the connection between your second dropdown and its target hiddenform2 element. Let's fix this step by step:

Step 1: Remove Nested Forms #

Instead of wrapping each file upload section in a separate <form>, use a regular <div> (since you already have a parent form handling submission). This keeps your HTML valid.

Step 2: Fix Duplicate for Attribute Values #

Your file input labels both use for="customFile"—this means clicking either label will target the first input. Give each input a unique ID and update the corresponding label to match.

Step 3: Keep Your Existing JavaScript (It Works!) #

Your showDiv function is perfectly functional once the DOM structure is corrected.

Modified Working Code #

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
function showDiv(divId, element) {
    document.getElementById(divId).style.display = element.value == 3 ? 'block' : 'none';
}
</script>

<style>
#hiddenform, #hiddenform2 { display: none; }
</style>

<div class="modal-content">
    <div class="modal-header">
        <div class="modal-title gap-title" id="exampleModalCenterTitle">Title</div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form method="POST" action="" enctype="multipart/form-data">
            <div class="form-inline align-items-center">
                <label class="mr-sm-2 col-form-label-lg">Option 1</label>
                <select class="custom-select" onchange="showDiv('hiddenform', this)">
                    <option value="" selected disabled>Choose option</option>
                    <option value="1">Previous version</option>
                    <option value="2">Current version</option>
                    <option value="3">From Excel</option>
                </select>
                <!-- Replaced nested form with a div -->
                <div class="row justify-content-center mx-auto p-2" id="hiddenform">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input pointer" name="file1" id="customFile1">
                        <label class="custom-file-label pointer" for="customFile1">Choose file</label>
                    </div>
                </div>

                <label class="mr-sm-2 col-form-label-lg">Option 2</label>
                <select class="custom-select" onchange="showDiv('hiddenform2', this)">
                    <option value="" selected disabled>Choose option</option>
                    <option value="1">Previous version</option>
                    <option value="2">Current version</option>
                    <option value="3">From Excel</option>
                </select>
                <!-- Replaced nested form with a div, unique ID for input/label -->
                <div class="row justify-content-center mx-auto p-2" id="hiddenform2">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input pointer" name="file2" id="customFile2">
                        <label class="custom-file-label pointer" for="customFile2">Choose file</label>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <a href="{{url_for('gap_analysis_output')}}">
            <button type="button" class="btn btn-primary">Generate file</button>
        </a>
    </div>
</div>

Key Changes Explained: #

• Removed nested forms: All file upload fields now live inside the parent form, which complies with HTML standards.
• Unique input IDs: customFile1 and customFile2 ensure labels correctly target their respective inputs.
• Distinct name attributes: file1 and file2 make it easier to differentiate the two files on the server side (optional but recommended).
• Consolidated CSS: Combined hidden element styles into a single rule for cleaner code.

Now both dropdowns will correctly show/hide their respective file upload sections when you select "From Excel"!

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