获取当前 URL 并更新 URL 中的参数
Posted
技术标签:
【中文标题】获取当前 URL 并更新 URL 中的参数【英文标题】:Get current URL and update parameters in URL 【发布时间】:2021-01-16 16:22:49 【问题描述】:提前感谢您的宝贵时间。
我正在尝试从 URL 中获取值并自动填充单选选项。
示例网址 = https://example.com/v2-search/?&orderBy=relevance&tags=Kinship
<form action="https://example.com/v2-search/?" method="GET" >
<div class="uk-inline">
<div class="uk-inline">
<label>Filter by: <label>
<input id="distance" class="uk-radio" type="radio" name="orderBy" value="distance"> Distance
<input id="relevance" class="uk-radio" type="radio" name="orderBy" value="relevance" > Relevance
</div>
<div class="uk-inline">
<button style="margin-left: 15px;" class="uk-button uk-button-primary uk-button-small uk-mobile-width">Update</button>
</div>
</div>
</form>
这是我在 cmets 中使用的 JS。
function autoFill()
var ob = url.searchParams.get("orderBy"); //Getting the value from the URL for the first radio options selected.
var radioElements = document.getElementsByName("orderBy"); //Selecting the first radio options.
for (var i=0; i<radioElements.length; i++)
if (radioElements[i].getAttribute('value') == 'ob')
radioElements[i].checked = true; //Adding checked to the value based on the URL
【问题讨论】:
【参考方案1】:您可以将 URL 查询(搜索)字符串解析为 URLSearchParams
实例,这样可以更轻松地获取值。
然后您可以搜索相关的单选按钮并检查是否找到
const params = new URLSearchParams(location.search)
const orderBy = params.get("orderBy")
const radio = document.querySelector(`input[name="orderby"][value="$orderBy"]`)
if (radio)
radio.checked = true
【讨论】:
以上是关于获取当前 URL 并更新 URL 中的参数的主要内容,如果未能解决你的问题,请参考以下文章