get the values of two dropdowns into a url

Question

I have two dropdowns that I need their values inside a URL. I am using selectize for the two dropdowns. But I mostly used jquery for the functions.

Expected output is a URL that changes with value of the two dropdowns after the user clicks on the button. when I checked the value of the URL after the click event it doesn't show both on the URL instead it occurs differently I believe as it should but is there a way to make these values appear on the url together at once?

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

Outside of the map loop declare your variables url, marketValues and msmValues. Then After the loop, generate the URL with the variables. Right now, the URL gets replaced during each loop as well as the other two variables. Also, use an else if not two separate if statements.

Using each is the better option as map is used to apply functions to the content of the array. Where as each simply loops through them

$(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);
  });
});