单击按钮时如何根据值将用户重定向到特定页面？

Question

所以我想根据某个值（例如，如果值为“8”，我希望用户被重定向到“ 8.html" 页）。

我正在使用 select 让用户能够在不同的值（此处为时区）之间进行选择

我尝试使用 if 指令但没有成功。如果有人知道该怎么做，那将对我有很大帮助。谢谢

这是我到目前为止得到的：

function redirectTZ() {
  var tz = value

  document.write(tz);

  if (tz == -4);
  window.location.assign("gmt+1.html");
  if (tz == -3);
  window.location.href = "gmt-3.html";
  if (tz == 0);
  window.location.href = "gmt+0.html";
  if (tz == 1);
  window.location.href = "gmt+1.html";
  if (tz == 3);
  window.location.href = "gmt+3.html";
}

<select>
  <option timeZoneId="11" gmtAdjustment="GMT-06:00" useDaylightTime="1" value="-4">(GMT-04:00) Washington</option>
  <option timeZoneId="23" gmtAdjustment="GMT-03:00" useDaylightTime="0" value="-3">(GMT-03:00) Buenos Aires</option>
  <option timeZoneId="30" gmtAdjustment="GMT+00:00" useDaylightTime="1" value="0">(GMT+00:00) Lisbon, London</option>
  <option timeZoneId="30" gmtAdjustment="GMT+00:00" useDaylightTime="1" value="0">(GMT+00:00) Lisbon, London</option>
  <option timeZoneId="33" gmtAdjustment="GMT+01:00" useDaylightTime="1" value="1">(GMT+01:00) Brussel, Copenhagen, Madrid, Paris</option>
  <option timeZoneId="46" gmtAdjustment="GMT+03:00" useDaylightTime="1" value="3">(GMT+03:00) Moscou, St. Petersburg</option>
</select>

<button onclick="redirectTZ()">Valider</button>

Answer 1

您需要从下拉列表中获取选定的值。请试试这个，

<script>
function redirectTZ() {
var tz = document.querySelector("select").value;

Answer 2

对我来说，我将创建一个表单，我将使用此表单的提交通过 select

的名称属性检索选项的值

html

<form id="form">
  <select name="timezone">
    <option
    timeZoneId="11"
    gmtAdjustment="GMT-06:00"
    useDaylightTime="1"
    value="-4"
    >
        (GMT-04:00) Washington
    </option>
    <option
    timeZoneId="23"
    gmtAdjustment="GMT-03:00"
    useDaylightTime="0"
    value="-3"
    >
        (GMT-03:00) Buenos Aires
    </option>
    <option
    timeZoneId="30"
    gmtAdjustment="GMT+00:00"
    useDaylightTime="1"
    value="0"
    >
        (GMT+00:00) Lisbon, London
    </option>
    <option
    timeZoneId="30"
    gmtAdjustment="GMT+00:00"
    useDaylightTime="1"
    value="0"
    >
        (GMT+00:00) Lisbon, London
    </option>
    <option
    timeZoneId="33"
    gmtAdjustment="GMT+01:00"
    useDaylightTime="1"
    value="1"
    >
        (GMT+01:00) Brussel, Copenhagen, Madrid, Paris
    </option>
    <option
    timeZoneId="46"
    gmtAdjustment="GMT+03:00"
    useDaylightTime="1"
    value="3"
    >
        (GMT+03:00) Moscou, St. Petersburg
    </option>
  </select>

  <button type="submit">Valider</button>
</form>

javascript

const form = document.getElementById("form");

form.onsubmit = submit;

function submit(event) {
 event.preventDefault();
 const tz = parseInt(event.target.timezone.value);

 console.log(tz);

 switch (tz) {
  case -4:
    return (window.location.href = "gmt+1.html");
  case -3:
    return (window.location.href = "gmt-3.html");
  case 0:
    return (window.location.href = "gmt+0.html");
  case 1:
    return (window.location.href = "gmt+1.html");
  case 3:
    return (window.location.href = "gmt+3.html");

  default:
    break;
  }
}

Answer 3

我想这就是您要找的。我建议为您的 select 设置一个 id，获取 selected 值并使用该值创建 url.

HTML

<select id="select_id">
  <option timeZoneId="11" gmtAdjustment="GMT-06:00" useDaylightTime="1" value="-4">(GMT-04:00) Washington</option>
  <option timeZoneId="23" gmtAdjustment="GMT-03:00" useDaylightTime="0" value="-3">(GMT-03:00) Buenos Aires</option>
  <option timeZoneId="30" gmtAdjustment="GMT+00:00" useDaylightTime="1" value="+0">(GMT+00:00) Lisbon, London</option>
  <option timeZoneId="30" gmtAdjustment="GMT+00:00" useDaylightTime="1" value="+0">(GMT+00:00) Lisbon, London</option>
  <option timeZoneId="33" gmtAdjustment="GMT+01:00" useDaylightTime="1" value="+1">(GMT+01:00) Brussel, Copenhagen, Madrid, Paris</option>
  <option timeZoneId="46" gmtAdjustment="GMT+03:00" useDaylightTime="1" value="+3">(GMT+03:00) Moscou, St. Petersburg</option>
</select>

<button onclick="redirectTZ()">Valider</button>

Javascript

function redirectTZ() {
  // Get the selected value
  var tz = document.getElementById("select_id").value;
  // Redirect user
  window.location.assign("gmt"+tz+".html");
}

单击按钮时如何根据值将用户重定向到特定页面？

How can I redirect my users to a specific page according to a value when clicking on a button?

javascript

redirect

button