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

【问题标题】：javascript to make query strings autofill a formjavascript使查询字符串自动填充表单
【发布时间】：2022-01-12 09:34:51
【问题描述】：

我的编码经验很少，但通常学习速度很快，并且一直在逐个查找内容以学习如何创建网页所需的一些简单内容。我希望能够使用我的 URL 中的查询字符串自动填充表单（即 example.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，然后输入 ?Photo=Pelicans 或 ?Photo=Dolphins，该表格将自动分别填写 Pelicans 或 Dolphins 的答案。显然这不起作用，我现在的理解是我需要一些 javascript 代码来使查询字符串像那样工作？但是我已经尝试了几个星期来弄清楚如何做到这一点，逐行检查我能找到的每一个相关示例代码，试图理解他们在做什么，但没有一个奏效。是否有一个相对简单的代码可以完成这个功能，或者我只是在这里完全超出了我作为菜鸟的深度？

【问题讨论】：

您的意思是要根据您的下拉选择更改表单href 属性吗？我想知道你到底想用它来实现什么？
@groovy_guy 不，我只是希望已经根据查询字符串参数填写了选择。基本上，我希望能够给某人一个带有查询字符串的 url，以便他们在打开页面时已经选择了他们想要的选项，而不是他们必须自己在菜单中找到该选项。（即，如果他们想要鹈鹕的照片，我可以给他们 URL mywebsite.com/Photo=Pelicans，这不仅会将他们带到 mywebsite.com，而且已经在下拉选择中填写了鹈鹕作为响应他们以这种方式打开网站时的照片表单。）

标签： javascript html forms query-string auto-populate

【解决方案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>

【讨论】：