how to redirect user to their selected option page-CodePudding

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

like i have semester1,semester2,semester3 as option so i want that if anyone select semester 1 then he will move to semester 1 page

CodePudding user response：

I would subscribe to the change event of the select, and then, depending on the selected value, would redirect to the appropriate page

something like this:

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

CodePudding user response：

I made an example here for you! I placed a link below under the select. The value change event replces the href attribute of the tag.

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