Список состояний ссылок Выпадающий HTML на определенную страницу - PullRequest
Новая
       40

Список состояний ссылок Выпадающий HTML на определенную страницу

2 голосов
/ 19 марта 2019

Я добавил раскрывающийся список состояний на мою домашнюю страницу, на котором используется wordpress / elemntor.

Когда элемент выбирается из раскрывающегося списка, я хочу перенаправить пользователя на другой URL-адрес.Например, когда выбрана Грузия, я бы хотел перенаправить на этот 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>

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

Этого можно добиться, передав выбранную опцию в функцию 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>
0 голосов
/ 20 марта 2019

Вы можете легко сделать это с помощью 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>
...