将两个下拉菜单的值放入 url

Question

我有两个下拉菜单，我需要它们在 URL 中的值。我正在对两个下拉菜单使用 selectize。 但我主要使用 jquery 作为功能。

预期的 output 是一个 URL，它在用户单击按钮后随两个下拉列表的值而变化。 当我在点击事件后检查 URL 的值时，它并没有同时显示在 URL 上，而是出现了不同的情况，我相信它应该如此，但是有没有办法让这些值同时出现在 url 上？

 $(document).ready(function($) { $(".dropdown_menu").selectize({ sortField: "text", placeholder: "Select a value...", }); $("#dad").on("click", function() { $(".dropdown_menu").map(function() { let marketValues = ""; let msmValues = ""; if ($(this).is("#dropdown1")) { //using join "&" to capture multiple values marketValues += $(this).val().join("&"); } if ($(this).is("#dropdown2")) { msmValues += $(this).val().join("&"); } //expecting the url change with values of the dropdown after the click event let url = `localhost:5000/${marketValues}/${msmValues}`; }); }); });

 <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>

Answer 1

无需循环，因为您已经拥有唯一 ID

 $(document).ready(function($) { $(".dropdown_menu").selectize({ sortField: "text", placeholder: "Select a value...", }); $("#dad").on("click", function() { let marketValues = $("#dropdown1").val().join("&"), msmValues = $("#dropdown2").val().join("&"); //expecting the url change with values of the dropdown after the click event let url = `localhost:5000/${marketValues}/${msmValues}`; // do something with the URL here console.log(url) }); });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/css/selectize.css" /> <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>

Answer 2

在 map 循环之外声明您的变量url 、 marketValues和msmValues 。 然后在循环之后，用变量生成 URL。 现在，URL 和其他两个变量在每个循环中都会被替换。 此外，使用 else if not 两个单独的 if 语句。

使用 each 是更好的选择，因为 map 用于将函数应用于数组的内容。 每个人都简单地循环遍历它们

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

  $("#dad").on("click", function() {
    let marketValues = "";
    let msmValues = "";

    $(".dropdown_menu").each(function() {
      if ($(this).is("#dropdown1")) {
        //using join "&" to capture multiple values   
        marketValues += $(this).val().join("&");
      }
      else if ($(this).is("#dropdown2")) {
        msmValues += $(this).val().join("&");
      }
    });

    let url = `//localhost:5000/${marketValues}/${msmValues}`;
    console.log(url);
  });
});