Есть ли способ показать значение выбранного параметра в меню выбора после turbolinks.visit (url)

Question

У меня есть меню выбора с кучей опций, имеющих в качестве значения "url's". Как только пользователь нажмет на опцию, он перенесет их на определенный URL. Я хочу, чтобы выбранная опция отображалась в меню выбора при переходе на конкретный URL.

Код: Html:

<div data-controller="dropdown">
<select id="abcMenu" data-action="dropdown#abc">
    <option value="/abc">A</option>
    <option value="/xyz">B</option>
    <option value="/def">C</option>
</select>
</div>

Javscript

 abc(){

  var elt = document.getElementById('abcMenu');
  elt.options[elt.selectedIndex].setAttribute('selected','selected');
   var option = elt.options[elt.selectedIndex].value;
   Turbolinks.visit(option);  
 }

Turbolinks перейдет к следующему пути, тогда как выпадающий вариант предварительно выбран для первого варианта. Может кто-нибудь, пожалуйста, дайте мне знать, как это исправить.

Answer 1

Вы можете использовать window.location.pathname, чтобы получить путь, а затем установить соответствующую опцию из выбора:

  function selectOptionByValue(element, value){
    for(var i=0; i < element.options.length; i++) {
      if(element.options[i].value == value) {
        element.selectedIndex = i;
      }
    }
  }

Где element - это элемент select, а value - путь, который вы хотите проверить.