如何使用提交按鈕組合值添加多個下拉表單並將另一個 html 頁面名稱添加到 go

Question

我希望提交按鈕對表單中兩個不同下拉菜單中的組合值起作用。這將是 html 頁面名稱。

例如...west 和winter 是一個不同的選項，將創建“westwinter.html”，然后west 和summer 是一個不同的選項，將創建“westsummer.html”。 並單擊提交按鈕，創建的頁面將加載。我已經創建了名為（例如 westwinter.html）的此類 html 頁面。

我努力了好幾天才能完成這項工作。 我覺得這一定是可能的。 請幫忙！

這是我使用的代碼。 當我將值替換為頁面名稱時（例如 westsummer.html）。 該頁面將在提交 (go) 時加載。 我希望計算第一個下拉列表和第二個下拉列表的值，結果應該是提交時的頁面名稱。 最后應該有 16 個不同的 html 頁面名稱。 我想要這個帶有 jQuery 或 javascript 的解決方案。

  <div class="selCont">
  <h2>pick an option</h2>

  <select id="selection" name="selection">
  <option value="1">West</option>
  <option value="2">East</option>
  <option value="3">North</option>
  <option value="4">South</option>
  </select>

  <select id="selection" name="selection">
  <option value="1">Winter</option>
  <option value="2">Spring</option>
  <option value="3">Summer</option>
 <option value="4">Fall</option>

 </select>
 <button class="go-btn" type="submit">Go</button>
 </div>

Answer 1

首先，讓我們為 select 標簽設置唯一的 ID，然后將值設置為實際的字符串（我們可以將它們保持為數字並稍后在它們上執行開關以確定它們的值，但這樣更容易）：

<select id="direction" name="selection">
    <option value="west">West</option>
    <option value="east">East</option>
    <option value="north">North</option>
    <option value="south">South</option>
</select>

<select id="season" name="selection">
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="fall">Fall</option>
</select>

接下來，讓我們編寫一個 function 來使用來自這些 select 標記的值組成一個鏈接。 我在這里使用了document.querySelector ，但如果您願意，您可以輕松地將其更改為 jQuery：

function getLink() {
    var direction = document.querySelector("#direction").value;
    var season = document.querySelector("#season").value;
    //Assuming that the html files are in the same folder as the current page
    return "./" + direction + season + ".html";
}

最后，讓我們更新我們的按鈕以在點擊時將頁面位置更改為新鏈接：

<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>

這是所有的一切：

 <.DOCTYPE html> <html lang="en"> <body> <div class="selCont"> <h2>pick an option</h2> <select id="direction" name="selection"> <option value="west">West</option> <option value="east">East</option> <option value="north">North</option> <option value="south">South</option> </select> <select id="season" name="selection"> <option value="winter">Winter</option> <option value="spring">Spring</option> <option value="summer">Summer</option> <option value="fall">Fall</option> </select> <button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button> </div> </body> <script> function getLink() { var direction = document.querySelector("#direction");value. var season = document.querySelector("#season");value. return "./" + direction + season + ";html"; } </script> </html>

如何使用提交按鈕組合值添加多個下拉表單並將另一個 html 頁面名稱添加到 go

問題描述

1 個解決方案

解決方案1
1 2019-11-03 17:52:25

如何使用提交按鈕組合值添加多個下拉表單並將另一個 html 頁面名稱添加到 go

問題描述

1 個解決方案

解決方案1 1 2019-11-03 17:52:25

解決方案1
1 2019-11-03 17:52:25