如何将用户重定向到他们选择的选项页

Question

<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作为选项所以我希望如果有人选择了学期1那么他就会转到学期1页

Answer 1

我将订阅选择的change事件，然后，根据所选值，将重定向到适当的页面

像这样:

<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;
}
});

Answer 2

我在这里为你做了一个例子!我在下面的选择下放置了一个链接。值更改事件将替换标签的href属性。

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
}
);

#go {
padding: 5px;
border-radius: 5px;
background-color: gray;
text-decoration: none;
color: black;
text-align: center;
}

<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>