根据 URL 参数选择的下拉菜单选项

Question

我有一个我几乎无法控制的网站。

预设表单选择了我想设置不同的选项。

代码示例如下：

<form id="myForm" action="https://secure.domain.net/account/order" method="post">
<table><tbody><tr class="paperTR tr_class_paper"><td class="paperTD fiTitle fiItem">
<div>Paper</div>
<select id="paper" name="paper" onchange="EC_LithoCalc.updateForm()">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
</select>
</td></tr></tr></tbody></table>
</form>

我已经尝试了该示例的许多变体： domain.com/page?paper=1

但似乎没有什么对我有用。

我发现的所有内容都在谈论 javascript 或 jquery，但我对这些一无所知。不过，我知道编码应该以 < 标签开头，而我看到的只是里面的内容。

我很困惑。

任何人都可以帮助我吗？

我整天都在做这件事，我将不胜感激。

谢谢你。

Answer 1

如果不使用 JavaScript 代码，这是不可能的（或几乎不可能的）。以下是使用 jQuery（这是一个 JavaScript 库）的示例：

使用 jQuery 和新的 URL API，它可以很容易地完成。您必须在 HTML 中包含 jQuery。这是一篇关于如何在 HTML 上设置它的好文章。

因此，要获取查询参数值，然后将其设置为下拉值，您可以执行以下操作：

$(document).ready(function() {
  // Construct URL object using current browser URL
  var url = new URL(document.location);

  // Get query parameters object
  var params = url.searchParams;

  // Get value of paper
  var paper = params.get("paper");

  // Set it as the dropdown value
  $("#paper").val(paper);
});

So#paper匹配select元素的 ID，然后将其选定的值设置为在查询参数中接收到的值。

相关文章：

• jQuery 选择器
• 网址接口

更新：

我看到另一个与 jQuery 冲突的库$似乎被分配给了其他东西。要解决此问题，您可以尝试使用 jQuery 的noconflict. 在 HTML 中包含 jQuery 的过程仍然保持不变。只需确保在$用作其别名的库之后加载 jQuery 。

你只需要像这样更改代码：

// Relinquish control of `$` to previous library
jQuery.noConflict();

// Wrap jQuery code in IIFE
(function($) {
  $(document).ready(function() {
    // Construct URL object using current browser URL
    var url = new URL(document.location);

    // Get query parameters object
    var params = url.searchParams;

    // Get value of paper
    var paper = params.get("paper");

    // Set it as the dropdown value
    $("#paper").val(paper);
  });
})(jQuery);

上面只是将之前的代码包装在一个IIFE 中，以防止它与其他库发生冲突。