如何在选中下拉菜单与复选框时跳转至指定页面

没问题，我来帮你搞定这个需求！首先看起来你的HTML代码没写完，我先补全一个包含下拉菜单和复选框的完整示例，然后分两种常见场景写JavaScript逻辑，你可以直接套用或者按需修改。

第一步：补全HTML结构 #

先给出一个完整的页面结构，包含日期下拉菜单和活动类型复选框：

<div class="dropdown">
  <div>
    <select name="Days" id="daySelect">
      <option value="">请选择日期</option>
      <option value="Saturday">Saturday</option>
      <option value="Sunday">Sunday</option>
      <option value="Friday & Saturday">Friday & Saturday</option>
    </select>
  </div>
</div>

<!-- 活动类型复选框组 -->
<div class="activity-options">
  <h4>选择活动类型：</h4>
  <label>
    <input type="checkbox" name="activity" value="concert"> 演唱会
  </label>
  <label>
    <input type="checkbox" name="activity" value="workshop"> 工作坊
  </label>
  <label>
    <input type="checkbox" name="activity" value="exhibition"> 展览
  </label>
  <button id="confirmJump">确认跳转</button>
</div>

第二步：实现JavaScript跳转逻辑 #

场景1：下拉菜单选完直接跳转 #

如果希望用户选完日期就自动跳转页面，用这个逻辑：

// 获取下拉菜单元素
const daySelector = document.getElementById('daySelect');

// 监听下拉菜单的change事件
daySelector.addEventListener('change', function() {
  const selectedDay = this.value;
  // 如果没选择选项，直接返回不执行
  if (!selectedDay) return;

  // 定义日期和跳转地址的映射表，你替换成自己的实际URL就行
  const dayToUrl = {
    'Saturday': '/events/saturday-special',
    'Sunday': '/events/sunday-festival',
    'Friday & Saturday': '/events/weekend-bash'
  };

  // 跳转到对应页面
  window.location.href = dayToUrl[selectedDay];
});

场景2：结合复选框选择后点击按钮跳转 #

如果需要同时根据日期和选中的活动类型组合跳转地址，用这个逻辑：

// 获取页面元素
const daySelector = document.getElementById('daySelect');
const jumpButton = document.getElementById('confirmJump');
const activityCheckboxes = document.querySelectorAll('input[name="activity"]');

// 绑定按钮点击事件
jumpButton.addEventListener('click', function() {
  // 先验证日期是否选中
  const selectedDay = daySelector.value;
  if (!selectedDay) {
    alert('请先选择日期哦！');
    return;
  }

  // 获取所有选中的活动类型
  const selectedActivities = Array.from(activityCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 验证是否选中至少一个活动
  if (selectedActivities.length === 0) {
    alert('请至少选择一个活动类型！');
    return;
  }

  // 构造跳转URL，这里用查询参数传递活动类型，你可以根据需求调整格式
  const encodedDay = encodeURIComponent(selectedDay); // 处理特殊字符比如&
  const encodedActivities = selectedActivities.join(',');
  const targetUrl = `/events/${encodedDay}?activities=${encodedActivities}`;

  // 跳转页面
  window.location.href = targetUrl;
});

一些实用提示 #

• 记得把映射表或URL里的地址替换成你自己的实际页面路径。
• 如果复选框是单选逻辑（只能选一个），把type="checkbox"改成type="radio"，然后获取选中值的方式改成document.querySelector('input[name="activity"]:checked')?.value。
• 要是需要更复杂的验证（比如某些日期只能选特定活动），可以在事件里加额外的判断逻辑。
• 用encodeURIComponent处理特殊字符（比如空格、&），避免URL出现错误。

内容的提问来源于stack exchange，提问作者karina3