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

bvuwiixz  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(171)

我想通过单击某个按钮来更改选择输入的值,但此按钮位于另一个页面上。
我的按钮在主页上,带有选择输入的表单在联系人页面上。选择输入如下所示:

<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 découverte”
我正在尝试这个解决方案,但没有工作,因为不是一个引导模板,我认为,在这个例子中,表单输入和按钮是在同一页上,不像我的情况。

unftdfkk

unftdfkk1#

您可以通过非常简单的步骤实现这一点:
在主页中,让您的按钮成为如下锚标记:

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

你可以在href中看到我传递了一个带值的参数。
现在在contact.html页面,只需使用下面的代码:

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

现在,每当您单击主页中的锚按钮时,它都会重定向到contact.html页面,其中包含param=test,在contact.html页面中,我检查condition if param=test,然后显示选定的选项,我在js代码中将其作为值传递。

mzillmmw

mzillmmw2#

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

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

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

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

最后,您可以从Contact页面的URL中获取查询值,并更改所选选项:

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

你可以阅读更多的here

相关问题