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，但我不了解这些。虽然，我知道编码应该以＆lt;标签和我看到的内容看起来就像里面的东西。

我很困惑。

那里的任何人都可以帮助我吗？

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

谢谢。

Answer 1

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

使用jQuery和新的URL API，可以非常轻松地完成。您必须在HTML中包含jQuery。这是关于如何在HTML上设置它的nice article。

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

$(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冲突的库，因为$似乎被分配给其他东西。要解决此问题，您可以尝试使用jQuery的noconflict。将jQuery包含在HTML中的过程仍然保持不变。只需确保在使用$作为别名的库之后加载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中设置select控件，如下所示：

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>

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

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

4 个答案: