Показать текущее значение в опции выбора при загрузке

Question

Я хочу отфильтровать некоторую информацию, поэтому, когда я нажимаю кнопку, в поле ввода отображается текущее значение.

Например:

Когда я выбираю фрукты и затем нажимаю кнопку фильтра, я хочу, чтобы текст фруктов оставался в поле выбора опции.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<select class="form-control">
  <option>-Select-</option>
  <option>Fruits</option>
  <option>Vegetables</option>
  <option>Animal</option>
</select>

<div class="form-group">
  <button type="submit" class="btn btn-primary">Filter</button>
</div>

Answer 1

Попробуйте

$(document).ready(function(){
    $("button").click(function(){
        $("select").val();
    });
});

Answer 2

попробовать (изменить: извините, неправильно понять вашу проблему)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <select id='se' class="form-control">
    <option value="">-Select-</option>
      <option>Fruits</option>
      <option>Vegetables</option>
      <option>Animal</option>
    </select>

    
     <button class="btn btn-primary" onclick="$(function(){$('option:checked').removeClass('d-none').siblings().addClass('d-none')});">Filter</button>