如何根據選擇的選項更改 URL 以便新的 url 將 go 頁面與該選項預選？

Question

例如，如果我有一個包含兩個選項的頁面，然后單擊選項二上的選項。 我想創建一個新的 url ，其中已經選擇了選項 2。

 <select>
  <option>Opttion 1</option>
  <option >Option 2</option>
</select>

Answer 1

為了簡單起見，您可以使用 URL 搜索參數。 URL Search Params例如可以看起來像yourlocation.com/?param1=value param1，在這種情況下，將是您的參數，而 value 是它的值。

您可以通過 javascript 讀取參數值，如下所示：

let params = new URL(document.location).searchParams;
let selectedOption = params.get("option");
console.log(selectedOption);

對於您的示例，您可以像這樣更改 HTML 代碼：

<select>
  <option id="option1">Option 1</option>
  <option id="option2">Option 2</option>
</select>

並添加一些 javascript：

let params = new URL(document.location).searchParams;
let selectedOption = params.get("option");

document
  .getElementById("option" + selectedOption)
  .setAttribute("selected", true);

此代碼會將選定的選項設置為搜索查詢中的選項。