通过单击按钮更改选择输入的选项

Question

我想通过点击一个按钮来改变我的选择输入的值，但是这个按钮在另一个页面上。

我的按钮在主页上，带有选择输入的表单在联系人页面上。选择输入如下所示:

<select name="menu-vol" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required select-field w-select" id="select-vol" aria-required="true" aria-invalid="false">
<option value="">---</option>
<option value="Le marmaille">Le marmaille</option>
<option value="Le Vol découverte">Le Vol découverte</option>
<option value="Le plus">Le plus</option>
<option value="L'infini">L'infini</option>
<option value="Le vol des Hauts">Le vol des Hauts</option>
<option value="Le vol de distance">Le vol de distance</option>
<option value="Le vol du Maïdo">Le vol du Maïdo</option>
</select>

例如我想当我点击按钮时，输入选择值更改为"Le Vol dsamouvert ">

我正在尝试这个解决方案，但不工作，因为不是一个引导模板，我认为，在这个例子中，表单输入和按钮是在同一页上，不像我的情况。

Answer 1

您可以通过非常简单的步骤实现:

在主页中，让你的按钮像下面这样成为一个锚标记:

<a href="contact.html?param=test">Goto Contact</a>

你可以看到在href中，我传递了一个带有value的参数。

现在在contact.html页面中，只需使用以下代码:

if (window.location.search.includes('param=test')) {
document.getElementById('select-vol').value = 'Le Vol découverte';
}

现在，每当你点击锚按钮在主页它重定向到contact.html页面与param=test，并在contact.html页面我检查条件，如果param=test然后显示所选择的选项，我通过在js代码值。

Answer 2

我们假设你有一个这样的链接:

<a href="contact.html">Contact Page</a>

您可以更改href以便将查询参数发送到目标页面，如下所示:

<a href="contact.html?selectedValue=Le marmaille">Contact Page</a>

最后，您可以从联系人页面的URL中获取查询值，并更改所选选项:

const selectedValue = (new URL(document.location)).searchParams.get("selectedValue");
document.getElementById("select-vol").value = selectedValue;

你可以在这里阅读更多。