如何实现点击按钮后将两个Selectize下拉框值合并到同一URL？

你的代码核心问题在于循环内重复初始化变量和URL生成时机错误：

• 每次进入map循环时，marketValues和msmValues都会被重置为空字符串，导致只能拿到当前循环的下拉框值，另一个始终为空。
• URL在循环内部生成，此时另一个下拉框的值还未被收集，自然无法同时包含两个下拉框的选中内容。

修改后的完整代码 #

JavaScript部分

$(document).ready(function($) {
  $(".dropdown_menu").selectize({
    sortField: "text",
    placeholder: "Select a value...",
  });

  $("#dad").on("click", function() {
    // 分别获取两个下拉框的选中值，处理未选中的情况避免报错
    const marketValues = $("#dropdown1").val()?.join("&") || "";
    const msmValues = $("#dropdown2").val()?.join("&") || "";
    
    // 生成包含两个下拉框值的URL
    const url = `localhost:5000/${marketValues}/${msmValues}`;
    // 这里可以添加URL的使用逻辑，比如打印或跳转
    console.log(url);
    // window.location.href = url; // 需要跳转时取消注释
  });
});

HTML部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/js/selectize.min.js"></script>
<!-- food Drop down menu -->
<div style="max-width: 200px">
  <select id="dropdown1" class="dropdown_menu" multiple="multiple">
    <option value="rice">rice</option>
    <option value="beans">beans</option>
  </select>
</div>

<!-- name dropdown -->
<div style="max-width: 200px">
  <select id="dropdown2" class="dropdown_menu" multiple="multiple">
    <option value="bob">bob</option>
    <option value="max">max</option>
  </select>
</div>

<button id="dad">send</button>

关键改动说明 #

1. 直接获取下拉框值：通过ID直接定位两个下拉框，无需循环遍历，逻辑更简洁。
2. 空值处理：用?.可选链操作符避免下拉框未选中值时调用join()报错，再用|| ""设置默认空字符串。
3. 正确的URL生成时机：在收集完两个下拉框的值后再拼接URL，确保两个值都能被包含。

可选格式调整 #

如果需要修改多选值的分隔方式或URL格式，只需调整join的参数即可：

// 用逗号分隔多选值
const marketValues = $("#dropdown1").val()?.join(",") || "";
// 改用query参数形式的URL
const url = `localhost:5000?markets=${marketValues}&msms=${msmValues}`;

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