下拉菜單選擇不導航到鏈接

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>

香草香草

<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的默認行為是選擇選項，而不鏈接到選項值。

單擊search按鈕時，您將需要觸發JavaScript，然后將用戶重定向到所選值。

 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>