首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将用户重定向到所选选项页

如何将用户重定向到所选选项页
EN

Stack Overflow用户
提问于 2022-06-12 10:38:40
回答 2查看 43关注 0票数 0
代码语言:javascript
运行
复制
<main>
    <div class="container">
        <select name="semester" id="select-semester">
            <option value="no-semester">select semester</option>
            <option value="semester 1">semester 1</option>
            <option value="semester 2">semester 2</option>
            <option value="semester 2">semester 3</option>
        </select>
    </div>
</main>

就像我有semester1,semester2,semester3这样的选项,所以如果有人选择第一学期,他就会转到第一学期。

EN

回答 2

Stack Overflow用户

发布于 2022-06-12 11:11:59

我将订阅select的change事件,然后根据选定的值将其重定向到相应的页面。

就像这样:

代码语言:javascript
运行
复制
<main>
  <div class="container">
    <select name="semester" id="select-semester">
      <option value="">select semester</option>
      <option value="1">semester 1</option>
      <option value="2">semester 2</option>
      <option value="3">semester 3</option>
    </select>
  </div>
</main>


document
  .getElementById('select-semester')
  .addEventListener('change', function (this: HTMLSelectElement) {
    var semesterId = this.value;
    if (semesterId) {
      window.location.href = '/semester-' + semesterId;
    }
  });
票数 2
EN

Stack Overflow用户

发布于 2022-06-12 11:15:43

我在这里为你树立了一个榜样!我在“选择”下面放置了一个链接。值更改事件复制标记的href属性。

代码语言:javascript
运行
复制
let semester = document.querySelector("#select-semester");
let go = document.querySelector("#go");
semester.addEventListener("change", (e)=> {
    go.href = go.dataset.baselink + semester.value;
    go.innerHTML = "GO to " + semester.value
  }
);
代码语言:javascript
运行
复制
#go {
  padding: 5px;
  border-radius: 5px;
  background-color: gray;
  text-decoration: none;
  color: black;
  text-align: center;
}
代码语言:javascript
运行
复制
<div class="container">
        <select name="semester" id="select-semester">
            <option value="no-semester">select semester</option>
            <option value="semester 1">semester 1</option>
            <option value="semester 2">semester 2</option>
            <option value="semester 2">semester 3</option>
        </select>
        <a id="go" href="#" data-baselink="https://www.somelink.do/">GO</a>
    </div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72591429

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档