html - 根据 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。这是一个 nice article关于如何在您的 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);
});

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

相关文章:

• jQuery selectors
• URL API

---

更新:

我看到另一个库与 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 中以防止它与其他库发生冲突。