Flask依赖下拉框问题：Select元素Option值无法在JS中获取

问题描述 #

基于Flask+ibm_db实现关联下拉框，需求为选择第一个下拉框选项后，第二个下拉框自动加载关联选项。实际操作时第二个下拉框无响应，经排查发现：第一个下拉框的parent_id无法传递到后端/get_servers_list路由，前端执行console.log($('#search_category_id').val())返回undefined，导致后端请求未触发。

相关代码 #

Flask后端路由代码 #

@app.route("/unplanned_outage", methods=['GET', 'POST'])
def unplanned_outage():
    cur1 = conn.cursor()
    select="select * from impacted_tools"
    cur1.execute(select)
    tools = cur1.fetchall()
    cur1.close()
    return render_template(r'unplannedoutage.html', tools=tools)

@app.route("/get_servers_list", methods=['POST', 'GET'])
def get_servers_list():
    cur2 = conn.cursor()
    if request.method == 'POST':
        parent_id = request.form['parent_id']
        print(parent_id)
        cur2.execute("select * from impacted_servers where tools_id = %s", [parent_id])
        servers = cur2.fetchall()
        return jsonify({'htmlresponse': render_template('response.html', servers=servers)})

前端HTML代码（first_box.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script> 
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <title>Home Page</title>

    <script> 
    console.log($('#search_category_id').val());
    $(document).ready(function() {
    $('.js-example-basic-multiple').select2();
    });
    $(document).ready(function() {
        $('#search_category_id').change(function(){
            $.post("/get_servers_list", {
                parent_id: $('#search_category_id').val(),
            }, function(response){ 
                $('#show_sub_categories').html(response);
                $('#show_sub_categories').append(response.htmlresponse);
            });
    return false;
  });
}); 
    </script>
</head>
<body>
<form id="form-id" class="row g-3" style="margin: auto; width: 80%;  padding: 30px;" onsubmit="return false;" method="post">
        <div class="col-md-8">
            <label for="search_category_id" class="form-label">Impacted Tools</label>
            <select name="search_category"  id="search_category_id" class="form-control form-select js-example-basic-multiple" multiple="multiple" data-placeholder="Select Tools">
              <option value="" selected></option>
              {% for row in tools %}
              <option value='{{row[0]}}'>{{row[1]}}</option>
              {% endfor %}
            </select>
          </div>
          <div id="show_sub_categories"></div>
          <div class="col-md-12">
            <label for="inputState3" class="form-label">Expected Output</label>
            <select id="inputState3" class="form-select">
              <option selected></option>
              <option>RTC</option>
            </select>
          </div>

        <div class="col-12">
          <button type="submit" class="btn btn-primary">Validate</button>
        </div>
      </form>
</body>

响应模板代码（response.html） #

<body>
    <div class="col-md-12 form-group">
        <label for="sub_category_id" class="form-label">Impacted Services</label>
        <select name="sub_category"  id="sub_category_id" class="form-control">
          <option value="" selected></option>
          {% for row in servers %} 
          <option value="{{row[0]}}">{{row[2]}}</option>
          {% endfor %}
        </select>
      </div>
</body>

问题根源及修复方案 #

1. DOM加载顺序错误 #

• 直接在$(document).ready()外部执行console.log($('#search_category_id').val())时，DOM尚未加载完成，元素不存在，因此返回undefined。
• 修复：将该日志代码移到$(document).ready()内部。

2. Select2多选组件值获取方式错误 #

• 第一个下拉框为多选模式（multiple="multiple"），原生jQuery的.val()无法正确获取Select2多选组件的值，需使用Select2专属API。
• 修复：将$('#search_category_id').val()改为$('#search_category_id').select2('val')；同时后端需接收数组参数，将request.form['parent_id']改为request.form.getlist('parent_id')，并适配SQL的IN查询。

3. AJAX响应处理逻辑错误 #

• 回调中同时执行html(response)和append(response.htmlresponse)，会先将整个响应对象转为字符串插入（显示[object Object]），再追加正确HTML。
• 修复：仅保留$('#show_sub_categories').html(response.htmlresponse)。

4. 事件绑定时机问题 #

• 分开的$(document).ready()可能导致执行顺序异常，且原生change事件无法完全捕获Select2组件的状态变化。
• 修复：合并$(document).ready()代码块，使用Select2专属的select2:change事件绑定逻辑。

修改后的关键代码示例 #

前端JS代码 #

$(document).ready(function() {
    // 初始化Select2
    $('.js-example-basic-multiple').select2();

    // 打印选中值（移至DOM加载完成后）
    console.log($('#search_category_id').select2('val'));

    // 绑定Select2的change事件
    $('#search_category_id').on('select2:change', function(){
        const selectedIds = $(this).select2('val');
        $.post("/get_servers_list", {
            parent_id: selectedIds,
        }, function(response){ 
            $('#show_sub_categories').html(response.htmlresponse);
        });
        return false;
    });
});

后端路由代码 #

@app.route("/get_servers_list", methods=['POST', 'GET'])
def get_servers_list():
    cur2 = conn.cursor()
    if request.method == 'POST':
        # 获取多选的ID数组
        parent_ids = request.form.getlist('parent_id')
        print(parent_ids)
        # 适配多值的SQL查询
        placeholders = ','.join(['%s']*len(parent_ids))
        cur2.execute(f"select * from impacted_servers where tools_id IN ({placeholders})", parent_ids)
        servers = cur2.fetchall()
        return jsonify({'htmlresponse': render_template('response.html', servers=servers)})

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