Selectize多选值拼接为URL参数报错问题求助

问题根源 #

1. 箭头函数中的this不指向Selectize实例，导致$(this).val()无法正确获取选中值数组
2. Selectize的onChange回调第一个参数value，在多选场景下本身就是选中值的数组，不需要额外通过jQuery获取

修正后的前端代码 #

Selectize初始化部分

$(document).ready(function($) {
  let $myfood = $('#food').selectize({
    sortField: "text",
    placeholder: "Select your favorite dishes..",
    onChange: (value) => {
      // 直接用回调参数value（数组）拼接成目标字符串
      let conc_val = value.join('&');
      food(conc_val);
    }
  }); 
});

数据请求函数（无需修改）

async function food(selected_food) {
  const url = `/myAdmin/fooAnaly/get_food_data/${selected_food}`;
  const response = await fetch(url);
  const datapoints = await response.json();
  // 此处可添加数据渲染逻辑（如更新图表）
}

后端Flask处理逻辑 #

在路由中接收拼接后的字符串，用&拆分得到选中的食物列表：

from flask import Flask, jsonify

@app.route('/myAdmin/fooAnaly/get_food_data/<selected_foods>')
def get_food_data(selected_foods):
    # 拆分参数为数组
    food_list = selected_foods.split('&')
    
    # 处理特殊情况：选中'all_food'时返回全量数据
    if 'all_food' in food_list:
        datapoints = get_all_food_data()  # 替换为你的全量数据查询逻辑
    else:
        datapoints = get_filtered_food_data(food_list)  # 替换为你的过滤查询逻辑
    
    return jsonify(datapoints)

额外提示 #

• 若担心&在URL中被转义，可改用其他分隔符（如|或,），只要前后端保持一致即可
• 可在Selectize中添加逻辑：选中all_food时自动取消其他选项，避免参数冲突

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