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

问题描述 投票:2回答:2

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

当从下拉列表中选择一个项目时,我想将用户重定向到另一个URL。例如,当选择Georgia时,我想重定向到此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>				
javascript html wordpress dropdown statelist
2个回答
0
投票

您可以使用jQuery轻松完成

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectCountry">
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
    <!-- ... list continues ... -->
</select>

<script type="text/javascript">
$( document ).ready(function() {
  $("#selectCountry").change(function(){
    window.location.href = "https://www.everlastingopportunities.com/" + $("#selectCountry > option:selected").text() + "/";
  });
});
</script>

0
投票

您可以通过将所选选项传递给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>
© www.soinside.com 2019 - 2024. All rights reserved.