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

Question

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

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

如何在下拉菜单中选择 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>				

Answer 1

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

理想的是在上面加一个空白的选项，这样想要阿拉巴马州作为选项的人就可以选择一次。

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

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>