根据 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 中，以防止它与其他库发生冲突。

Answer 2

您将 paper=1 设置为查询字符串参数，但这不会更改选择控件的值。您需要提取查询字符串参数的值，然后相应地设置选择控件。

在JavaScript中检索查询字符串参数，可以参考本帖标记的答案How can I get query string values in JavaScript?

一旦你在查询字符串参数中传递了值，你就可以在 JavaScript 中设置选择控件，如下所示：

document.getElementById('paper').value = paperValue;

其中paperValue 是保存传递给页面的值的变量。请务必在文档准备好时加载/执行设置所选值的功能。

Answer 3

您提供了一个额外的</tr>，应该将其删除。

您需要使用提交按钮提交该表单。你的完整代码应该是这样的

<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>
   </tbody>
  </table>
  <input type="submit" value="Submit">
</form>

Answer 4

如果您不使用任何服务器语言，如 ASP 或 PHP，那么完成这项工作的唯一方法是使用 Javascript 或 jQuery。可以设置在页面完全加载后运行。

<script>
    if (document.readyState == 'complete') {
        var item = document.getElementById('paper').value;
        var items = document.getElementById('paper').options;
        for (var x = 0; x < items.length; x++) {
            if (items[x].value == item) {
                items[x].setAttribute('selected', true);
            }
        }
    } else {
        items[x].removeAttributes('selected');
    }
</script>

更新 1：

您似乎真的只想默认选择一个选项，所以只需在所需的选项标签中添加“selected”参数。

<option value="default" selected="selected">Default value</option>

如果任何其他选项标签具有相同的参数，请将其删除。