Выбор выпадающего меню не ведет к ссылке

Question

Я создал выпадающее меню в начальной загрузке.Я установил ссылки, используя php-код для размещения моего пути.(Я попробовал это без php, и я все еще получаю тот же результат) Когда я выбираю элемент и нажимаю кнопку отправки, чтобы получить категории, ничего не происходит.

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

<div class="container-fluid">
  <div class="row justify-content-center text-center">
    <div class="col-md-5">
      <select class="form-control selecter">
        <option selected="selected" value="">All Categories</option>
        <option value="<?php echo base_url();?>categories/posts/154">Auto</option>
        <option value="<?php echo base_url();?>categories/posts/154">House</option>
        <option value="<?php echo base_url();?>categories/posts/154">Lawn</option>
      </select>
      <br>
      <button class="btn btn-block btn-primary btn-gradient">Search</button>
    </div>
  </div>
</div>

Answer 1

Вы не можете перемещаться с помощью option. Если вы хотите перемещаться по изменению option или клику button, вы должны использовать метод JavaScript addEventListener для прослушивания событий.Пример: click в кнопке или change в выпадающем списке.Используя свойство window.location, вы можете перейти на страницу

<div class="container-fluid">
  <div class="row justify-content-center text-center">
    <div class="col-md-5">
         <select id="dropdown" class="form-control selecter">
             <option selected="selected" value="">All Categories</option>
             <option value="<?php echo base_url();?>categories/posts/154">Auto</option>
             <option value="<?php echo base_url();?>categories/posts/154">House</option>
             <option value="<?php echo base_url();?>categories/posts/154">Lawn</option>
         </select>
            <br>
         <button id="search" class="btn btn-block btn-primary btn-gradient">Search</button>

   </div>
 </div>
</div>

VANILLA JAVASCRIPT

<script>
let dropdown = document.getElementById('dropdown');
let searchBtn = document.getElementById('search');

searchBtn.addEventListener('click', function(e) {
   window.location =  dropdown.value;
}

// If you want to navigate when the selection option gets changed

dropdown.addEventListener('change', function(e) {
   window.location =  dropdown.value;
} </script>

JQUERY

<script>
    $(function(){
     // On option select navigation
      $('#dropdown').on('change', function () {
          var url = $(this).val(); 
          if (url) { 
              window.location = url;
          }

      });

      // On Search button click - navigation
      $('#search').on('click', function () {
          var url = $('#dropdown').val(); 
          if (url) { 
              window.location = url;
          }

      });
    });
</script>

Answer 2

Это элемент выбора без ссылки или действия form.Поведение по умолчанию select будет состоять в том, чтобы выбрать опцию, а не ссылаться на ее значение.

Вам нужно будет запустить JavaScript при нажатии кнопки search, а затем перенаправить пользователя навыбранное значение.

function search()
{
 var id = document.getElementById("selecter");
 window.location = id.options[id.selectedIndex].value;
}

<div class="container-fluid">
        <div class="row justify-content-center text-center">
<div class="col-md-5">
            <select class="form-control selecter" id="selecter">
              <option selected="selected" value="">All Categories</option>

              <option value="<?php echo base_url();?>categories/posts/154">Auto</option>
              <option value="<?php echo base_url();?>categories/posts/154">House</option>
              <option value="<?php echo base_url();?>categories/posts/154">Lawn</option>


            </select>
            <br>

            <button class="btn btn-block btn-primary btn-gradient" onclick="javascript:search()">Search</button>

</div>
</div>
</div>