Переход на страницу при выборе элемента в select, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте.
Переход на страницу при выборе элемента в select, как сделать?

Рабочий пример: https://jsfiddle.net/wsL9ra48/1/

Селект у меня такой:

<select name="sources" id="sources" class="custom-select sources" placeholder="Выберите город">
<option value="/xbr/">Хабаровск</option>
<option value="Новосибирск">Новосибирск</option>
<option value="Москва">Москва</option>
</select>

скрипт

<script>
  $(".custom-select").each(function() {
  var classes = $(this).attr("class"),
  id      = $(this).attr("id"),
  name    = $(this).attr("name");
  var template =  '<div class="' + classes + '">';
  template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
  template += '<div class="custom-options">';
  $(this).find("option").each(function() {
  template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
  });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);
  });
  $(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
  }, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
  });
  $(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
  $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
  });
  $(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
  });
  </script>

Answer 1

[leni_m]

если на одну страницу, добавляете :

$(".custom-option").on("click", function() {
    ...
    document.location.href = "my-page.com";
}

если на разные страницы, добавляйте вашим спанам ссылку на которую переходить, например так:

<span class="custom-option undefined" data-value="/xbr/" data-url="google.com">Хабаровск</span>
<span class="custom-option undefined selection" data-value="Новосибирск" data-url="yandex.ru">Новосибирск</span>
<span class="custom-option undefined" data-value="Москва" data-url="toster.ru">Москва</span>

А в js обрабатывайте например так:

$(".custom-option").on("click", function() {
    ...
    var url = $(this).data("url");
    document.location.href = url;
}

Comments

[Антон Вебсайтовский]

Я что-то подобное пробовал и не работало, вы пробовали на примере https://jsfiddle.net/wsL9ra48/1/ ?

Вы предлагаете option переделать на span, так у меня там js надо переделывать то в чем я не шарю. чтобы все работало отлично.

Answer 2

[Антон Вебсайтовский]

Я решил так, убрал селект для такой задачи и просто сделал обычную кнопку по которой кликаешь и вылезает список, можно из любого меню сделать такое, где есть выпадающий список.