从外部 URL 链接预选表单中的下拉菜单

Question

我有这个表单，我无法更改它的任何内容（ids、vals 等），因为它是由我的网站构建器自动生成的。是否可以使用代码甚至更好，只需使用 URL 自动选择一个选项？例如，使用 URL

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

在下面的表格中选择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

更新

这里是使用url查询参数的解决方案。

// Your link should look like this: https://www.boothemusic.com/gift-card/?price=50

const selectList = document.getElementById('GCValue');
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const price = urlParams.get('price'); // change "price" to anything you want.

for (let option of selectList.options) {
  let chosen = option.value;
  if(chosen === price) {
    selectList.value = price;
  }
}

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

const price = urlParams.get('price'); 将与给定搜索参数关联的值分配给price（查看this article 以了解有关 URLSearchParams 的更多信息）。 然后for-of 循环浏览选择选项并查找price 变量的匹配项。如果任何选项匹配price（在这种情况下为50），则其值设置为price，因此在您的下拉列表中选择50。

Answer 2

仅使用 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">