Flask+JQuery下拉选择后动态显示文本域问题求助

Let's work through your problems one by one. You've got two main issues: the textarea showing on page load, and the data not populating after selecting an option. Here's how to fix both:

1. Hide the Textarea by Default #

Right now, your resultDiv is visible as soon as the page loads. Add style="display:none;" to the div so it stays hidden until a selection is made. Also, we'll clean up the option value to avoid messy tuple strings that can cause backend parsing issues:

<div class="col-md-4"> 
 <select name="select1" class="form-control" id="select1" style="width:200px; height:30px;" required> 
 <option value="">Select the below option</option> 
 {% for each_round in round_names %} 
 <!-- Use a clean value instead of a tuple string -->
 <option value="{{each_round.round_name}}">{{each_round.round_name}}</option> 
 {% endfor %} 
 </select> 
 <div class="valid-feedback">Valid</div> 
 <div class="invalid-feedback">Please fill out this field</div> 
 <!-- Added display:none to hide initially -->
 <div id="resultDiv" style="display:none;"> 
 <textarea name="rdesc" id="rdesc" style="width:200px; height:300px;" required></textarea> 
 </div> 
</div>

2. Fix the JQuery AJAX Logic #

Your JavaScript has syntax errors and targeting issues that prevent the data from loading correctly. Let's correct those:

// Fixed: Correct JQuery selector syntax (added parentheses)
$("select[name='select1']").change(function() { 
 // Simplified: Get the selected value directly from the element
 var roundName = $(this).val(); 
 console.log(roundName); 

 // Show/hide the textarea div based on selection
 if (roundName === "") {
    $("#resultDiv").hide();
    return;
 }
 $("#resultDiv").show();

 $.ajax({ 
 type: 'POST', 
 url: '/roundname/get-description', 
 data: { 'round_name': roundName }, 
 success: function(results) { 
 console.log(results); 
 // Fixed: Target the textarea by ID, use val() instead of html() for textarea content
 $("#rdesc").val(results); 
 } 
 });
});

Key Fixes in the JS: #

• Selector Syntax: You had invalid syntax like $"select[name='select1']" — it needs to be wrapped in parentheses: $("select[name='select1']")
• Textarea Targeting: You tried targeting textarea[id='resultDiv'], but resultDiv is the parent div's ID. The textarea's actual ID is rdesc, so we use $("#rdesc")
• Content Update: For textareas, use .val() to set content instead of .html() (this is the correct method for form input elements)
• Empty Selection Handling: Added logic to hide the div if the user selects the empty option again

Quick Backend Check (Flask) #

Make sure your /roundname/get-description route correctly handles the round_name parameter and returns plain text content. Example:

from flask import request, jsonify

@app.route('/roundname/get-description', methods=['POST'])
def get_round_description():
    round_name = request.form.get('round_name')
    # Replace with your actual data fetch logic (DB query, etc.)
    round_description = "Fetched description for " + round_name
    return round_description

That should resolve both your issues: the textarea will stay hidden until a valid option is selected, and the correct data will populate once the AJAX call succeeds.

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