时间戳

首页 > 解决方案 > 将状态列表下拉 HTML 链接到特定页面

javascript - 将状态列表下拉 HTML 链接到特定页面

问题描述

我在主页上添加了一个下拉状态列表，它使用 wordpress/elemntor。

当从下拉列表中选择一个项目时，我想将用户重定向到另一个 URL。For example, when Georgia is selected I would like to redirect to this URL: https://www.everlastingopportunities.com/georgia/

在下拉菜单中选择格鲁吉亚时，如何使页面转到上述 URL？

<select>
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District Of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
    <!-- ... list continues ... -->
</select>

标签： javascripthtmlwordpressdropdownstatelist

解决方案

您可以通过将所选选项传递给 javascript 函数并使用它重定向到新 url 来实现它。

理想的做法是在顶部添加一个空白选项，以便希望 Alabama 作为选项的人做出一次选择。

正如您在问题中显示的那样，我已经根据可见名称制作了脚本。

function my_function(event) {
  var options = event.target.options;
  var selected = options[options.selectedIndex].text;
  window.location.href = 'https://www.everlastingopportunities.com/' + selected + '/';
}
<select onchange="my_function(event)">
	<option value="">---</option>
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District Of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
    <!-- ... list continues ... -->
</select>

推荐阅读