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的默认行为是选择选项，而不链接到选项值。

点击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>

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

2 个答案: