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

【问题标题】：Drop Down menu selection does not navigate to link下拉菜单选择不导航到链接
【发布时间】：2019-07-12 12:19:16
【问题描述】：

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

【问题讨论】：

标签： php html css bootstrap-4

【解决方案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>

香草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>

【讨论】：

【解决方案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>

【讨论】：