根据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冲突的库,因为 $
似乎已分配给其他库.要解决此问题,您可以尝试使用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屋!