从外部 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"的索引号。 如果您在它之前添加更多选项，则索引号会更改。