javascript使查询字符串自动填充表单

Question

我几乎没有编码经验，但通常学习速度很快，一直在逐项查找，以学习如何创建网页所需的一些简单内容。我希望能够使用我的URL中的查询字符串自动填充表单(即，示例.com？color=blue将自动加载表单，并在名为"color"的表单部分中填写选项"blue"(。这是我的html代码的组成部分：

<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">   
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans                                
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>

所以我想，如果我键入我的网站的URL，然后是？照片=鹈鹕队还是？照片=海豚，表格会自动填写答案，分别是鹈鹕队或海豚队。显然，这不起作用，我现在的理解是，我需要一些javascript代码来使查询字符串像那样工作？但几周来，我一直在努力想办法做到这一点，逐行检查我能找到的每一个相关的示例代码，试图理解他们在做什么，但都没有奏效。有没有一个相对简单的代码可以完成这个功能，或者我只是完全超出了我的深度？

Answer 1

假设您正试图从提供给用户的当前URL中获取参数，并相应地选择元素。

我已经为您编写了javascript代码。检查它是否有效。如果您想使用当前的URL，请使用window.location.href更新javascript中的URL。

var url_string = "http://www.mywebsite.com?photo=Rams"; //window.location.href (set for current url)
var url = new URL(url_string);
var c = url.searchParams.get("photo");
document.querySelector('option[value="'+c+'"]').selected = true
console.log(c);

<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">   
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans                                
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>