從外部 URL 鏈接中預選表單中的下拉列表

Question

我有這個表格，我無法更改它的任何內容（ids、vals 等），因為它是由我的網站構建器自動生成的。 是否可以使用代碼甚至更好，只需使用 URL 自動 select 選項？ 例如，使用 URL

https://mywebsite.com/GCValue=50/

到 select 下面表格中的50選項，而不是默認的10 ？ 我是 JS 和 JQuery 的初學者，所以如果可能的話，我很樂意在此過程中使用它們並了解一點。

<select id=GCValue>
  <option val="10">10</option>
  <option val="25">25</option>
  <option val="50">50</option>
  <option val="100">100</option>
  <option val="250">250</option>
</select> <br />

任何幫助或指向我正確方向的外部鏈接表示贊賞。

Answer 1

僅使用 JS 文檔路徑名中的一個變量

使用window.location.pathname獲取當前頁面的路徑，然后使用簡單的regex.exec(url)捕獲任何匹配/=([0-9])+/的內容。 這將匹配“=12345”格式的任何內容，並返回“12345”作為匹配項。

 var url = "https://mywebsite.com/GCValue=50/"; // in reality, use this: // var url = window.location.pathname; var regex = /=([0-9]+)/g; var match = regex.exec(url); document.getElementById("GCValue").value = match[1];

 <select id="GCValue"> <option val="10">10</option> <option val="25">25</option> <option val="50">50</option> <option val="100">100</option> <option val="250">250</option> </select> <br />

使用 JS 文檔路徑名中的許多變量

如果您想使用許多參數，只需擴展相同的邏輯即可。 例如，想象一下： /GCValue=50/Page=765/Index=42/ ...

 var url = "https://mywebsite.com/GCValue=50/Page=765/Index=42/"; // in reality, use this: // var url = window.location.pathname; var regex = /([A-Za-z0-9]+)=([0-9]+)/g; var match; while ((match = regex.exec(url)).= null) { document.getElementById(match[1]);value = match[2]; }

 <select id="GCValue"> <option val="10">10</option> <option val="25">25</option> <option val="50">50</option> <option val="100">100</option> <option val="250">250</option> </select> <br /> <input id="Page" type="text"><br> <input id="Index" type="text">

Answer 2

這是一個簡單的解決方案：

const selectList = document.getElementById('GCValue');

selectList.selectedIndex = '2';

更短：

document.getElementById('GCValue').selectedIndex = '2';

'2'是下拉列表中value="50"的索引號。 如果您在它之前添加更多選項，則索引號會更改。