根据URL参数选择下拉菜单选项 [英] Drop Down menu option selected based on URL paramater

问题描述

我有一个网站，对此我几乎没有控制权.

I have a website that I have very little control over.

预设表单选择了我要设置为其他选项的选项.

The preset form has selected options I would like set different.

代码示例为:

<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

I've tried many variants of the example: domain.com/page?paper=1

但是似乎没有任何作用.

But nothing seems to work for me.

我发现的所有内容都是关于javascript或jquery的，但我对这些都不了解.不过，我知道编码应以<标签，我所看到的看起来就像里面的东西.

Everything I find is talking about javascript or jquery, but I don't have any knowledge of those. Though, I know that coding should start with a < tag and what I see just looks like what goes inside.

我很困惑.

外面有人可以帮助我吗?

Can anyone out there help me?

我整天都在工作，我将不胜感激.

I been on this all day and I would appreciate any help.

谢谢.

推荐答案

如果不使用JavaScript代码，这是不可能的(或几乎是不可能的).以下是使用jQuery(这是一个JavaScript库)的示例:

This is impossible (or nearly impossible) without using JavaScript code. Following is an example using jQuery (which is a JavaScript library):

使用jQuery和新的URL API，可以很容易地完成它.您将必须在HTML中包含jQuery.这是不错的文章，有关如何在您的计算机上进行设置HTML.

Using jQuery, and new URL API, it can be done quite easily. You will have to include jQuery in your HTML. Here is a nice article about how to get it setup on your HTML.

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

So, to get the query parameter value, and then set it as a dropdown value, you can do something like this:

$(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，然后将其选择的值设置为查询参数中接收到的值.

So #paper matches the ID of the select element and then sets its selected value to what is received in the query parameter.

相关文章:

• jQuery选择器
• URL API

更新:

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

I see another library conflicting with jQuery as $ seems to be allocated to something else. To resolve this issue, you can try using jQuery's noconflict. The process to include jQuery in your HTML still remains the same. Just ensure that jQuery is loaded after the library which uses $ as its alias.

您只需要更改以下代码:

You only need to change the code like this:

// 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 中，以防止与之冲突其他图书馆.

The above simply wraps the previous code in an IIFE to prevent it from clashing with other libraries.

这篇关于根据URL参数选择下拉菜单选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！