将两个下拉列表的值获取到一个url中

Question

我有两个下拉列表，我需要它们在URL中的值。我在两个下拉框中使用selectize。但我主要使用jquery来实现函数。

期望的输出是一个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

在映射循环之外声明变量url、marketValues和msmValues。然后在循环之后，使用变量生成URL。现在，URL在每个循环中以及其他两个变量中都会被替换。另外，使用else-if语句，而不是使用两个独立的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);
});
});