Drop Down menu selection does not navigate to link - php

Question

I have created a drop down menu in bootstrap. I have set the links using php code to site my path. (I tried it without php and I still get the same result)
When I select the item and click the submit button to pull the categories nothing happens.
I created a link menu using the same paths and it works, as soon as I put it in a drop down menu with a button it does not work.
<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

You can not navigate using option, If you want to navigate on the option change or the button click, you should use JavaScript addEventListener method to listen for the events. Ex: click in button or change in select drop-down. By using window.location property you can navigate to page
<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

This is a select element no a link or a form action. The default behaviour of the select will be to select the option and not link to the option value.
You will you need to fire a JavaScript when search button is clicked and then redirect the user to the selected value.
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>