我希望提交按钮作用于表单中两个不同下拉菜单中的组合值。这将是一个 html 页面名称。
例如...西和冬天是一个不同的选项，将创建“westwinter.html”，然后西和夏天是一个不同的选项，将创建“westsummer.html”。然后单击“提交”按钮，将加载创建的页面。我已经创建了此类名为(例如 westwinter.html)的 html 页面。
我花了好几天的时间才完成这项工作。我觉得这一定是可能的。请帮忙!
这是我使用的代码。当我将该值替换为页面名称(例如 westsummer.html)时。该页面将在提交(go)时加载。我希望对第一个下拉列表和第二个下拉列表的值进行计数，结果应该是提交时的页面名称。最后应该有 16 个不同的 html 页面名称。 我想要这个带有 jQuery 或 javascript 的解决方案。
<div class="selCont">
<h2>pick an option</h2>
<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
最佳答案
首先，让我们为选择的标签设置唯一的 ID，并将值设置为实际的字符串(我们可以将它们保留为数字，并稍后对它们执行切换以确定它们的值，但这种方式更容易):
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
接下来，让我们编写一个函数来使用这些选择标记中的值组成链接。我在这里使用了 document.querySelector，但如果您愿意，您可以轻松地将其更改为 jQuery:
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
//Assuming that the html files are in the same folder as the current page
return "./" + direction + season + ".html";
}
最后，让我们更新按钮，以便在单击时将页面位置更改为新链接:
<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>
这就是全部内容:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="selCont">
<h2>pick an option</h2>
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
<button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
</div>
</body>
<script>
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
return "./" + direction + season + ".html";
}
</script>
</html>关于javascript - 如何添加带有提交按钮组合值的多个下拉表单并创建另一个 html 页面名称以转到它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58682772/