Автоматическая подставка города в селекте при переходе в данный город по урл, как реализовать?

Question

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

Здравствуйте.

Что я хочу реализовать, на сайте есть выбор города селект, но сформирован из дивов, ибо при выборе города надо было вставлять ссылку урл, а в селекте это сделать можно костыльными методами и то не всегда и не везде работает правильно.

При выборе города, мы попадаем на страницу, допустим выбираем в селекте Москва, и нас перекидывает на урл сайт.ru/msk/ , как сделать чтобы в селекте первая строка выберите город, была Москва. Ну так и для других городов. Чтобы подставлялся тот город в котором мы находимся.

Сайт на html

Сам селект:

<div class="dropdownn">
    <button onclick="myFunction()" class="dropbtn">Выберите город <i class="icon-arr"></i></button>
    <div id="myDropdown" class="dropdownn-content">
      <input type="text" placeholder="Поиск" id="myInput" onkeyup="filterFunction()">
      <div class="ryll1">
        <div class="drt">
          <a href="/msk/" title="Москва">Москва</a>
          <a href="/dalnegorsk/" title="Москва">Дальнегорск</a>
          <a href="/vladivostok/" title="Москва">Владивосток</a>
          <a href="/habarovsk/" title="Москва">Хабаровск</a>
        </div>
      </div>
    </div>
  </div>

Скрипт селекта:

<script>
      function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
      }
      function filterFunction() {
        var input, filter, ul, li, a, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        div = document.getElementById("myDropdown");
        a = div.getElementsByTagName("a");
        for (i = 0; i < a.length; i++) {
          if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
          } else {
            a[i].style.display = "none";
          }
        }
      }
    </script>

Comments

[Дмитрий]

Чем вам выпадающий список не угодил? Значение и имя там без костылей передать

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

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

Answer 1

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

Вот решение:

<script>
      function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
      }
      function filterFunction() {
        var input, filter, ul, li, a, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        div = document.getElementById("myDropdown");
        a = div.getElementsByTagName("a");
        for (i = 0; i < a.length; i++) {
          if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
          } else {
            a[i].style.display = "none";
          }
        }
      }

      
      jQuery(document).on('ready', function() {
        var filter = jQuery('#myDropdown'), links = filter.find('a'), btn = jQuery('.dropbtn')

        links.each(function(index, el) {
          var _this = jQuery(el), attr_href = _this.attr('href'), re = new RegExp(attr_href.replace(/\\/g, ''),'ig');

          if(re.test(window.location.pathname)) {
            _this.addClass('selected');
            btn.text(_this.text());
          }
        });

      });
    </script>

и стиль

.drt a.selected {
  background: #F48951;
  color: #fff;
}

Добавлен кусок когда. При переходе в город из списка селект, город выделяется и где написано выберите город, написан город.

Answer 2

[Дима Долготер]

get параметр в урл пихай и потом проверяй какой город
в localstorage тоже можно передавать текщий город

Comments

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

а как все это сделать, в этом не очень силен )

[Дима Долготер]

Антон Вебсайтовский, https://tproger.ru/articles/localstorage/

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

SpiderPigAndCat, спасибо, походу я точно сам не смогу реализовать это )

[Дима Долготер]

Антон Вебсайтовский, если еще нужна помощь, то напишите)

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

SpiderPigAndCat, конечно нужна )

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

SpiderPigAndCat, Поможете если, отблагодарю.

[Дима Долготер]

Антон Вебсайтовский, можно ссылку на сайт. или стили селекта

[Дима Долготер]

Антон Вебсайтовский,
там js запоминает город по которому кликнули. и при загрузке страницы он подставляет город в поле ввода. или куда надо его подставить?