标记下拉列表和复选框时如何链接到页面答案

【问题标题】：How to link to a page when dropdown and checkboxes are marked标记下拉列表和复选框时如何链接到页面
【发布时间】：2018-03-20 20:43:28
【问题描述】：

我有一些 HTML 代码，其中包含一些下拉菜单和一些复选框，我想知道如何编写 Javascript 来链接到指定其选择的页面。代码是：

<div class="dropdown">
  <font color="black">
  <div>
    <select name="Days">
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
  <option value="Friday & Saturday">Friday & Saturday</option>
  <option value="Saturday & Sunday">Saturday & Sunday</option>
    <option value="Friday, Saturday, & Sunday">Friday, Saturday, & Sunday</option>

</select>
</form>
  </div>

</div>

<p></p>
<div2>Number of Tickets:</div2>

<div class="dropdown">
  <select name="ticketNumber">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
</form>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<h4>Total:  </h4>
<form action="http://paypal.com">
    <input type="submit" value="Submit" />
</form>
</div>

<div class="main">
  <h3>Choose Passes</h3>
  <form action="">
  <input type="checkbox" name="gender" value="male"> VIP<br>
  <input type="checkbox" name="gender" value="female"> Meet & Greet<br>
  <input type="checkbox" name="gender" value="other"> Shuttle
</form>
</div>

例如：如果用户选择周六选项，购买 2 张 VIP 门票，我不确定我将如何使用 if 语句或 case 语句链接到另一个页面。希望我已经足够清楚了，谢谢！

【问题讨论】：

标签： javascript html css if-statement switch-statement

【解决方案1】：

这取决于“链接到”的含义——您是尝试在用户选择选项后立即“自动导航”用户，还是在表单提交后更改表单提交的位置，即.

无论哪种方式，开始的概念都是相同的：您需要listen to change events on the inputs、extract the input's value，然后是某种将输入值映射到所需 URL 的逻辑，并根据您想要的结果对 URL 进行处理。

例如，如果每个 ticketNumber 映射到某种“票证 ID”，例如 URL 查询字符串，您可以通过更改其 action 属性来动态更改表单提交到的位置，如下所示：

function getUrl(id) {
    return 'https://super-tickets.com/order?id=' + id;
}

var form = document.querySelector('form');

document.querySelector('select[name=ticketNumber]').onchange = function changeEventHandler(event) {
    form.action = getUrl(event.target.value);
}

【讨论】：