php - 下拉菜单选择不导航到链接

Question

我在 Bootstrap 中创建了一个下拉菜单。我已经使用 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

您不能使用选项导航，如果您想在选项更改或按钮点击时导航，您应该使用JavaScript addEventListener 方法来监听事件。例如:单击 按钮或更改 选择下拉列表。通过使用 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>

普通 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>