Возьмите значение и создайте фильтр из поля ввода?

Вы можете получить значение выбора, когда оно <div class = "searchFilter" > <select class = "selectpicker" data-live-search = "true" onchange = " showChanges () " id = "selectpicker" > < значение параметра = "all" > Все </ option> < значение опции = "опубликовано" > Опубликовано </ option> < значение параметра = "черновик" > Черновик </ option> < значение опции = "in-review" > В обзоре </ option> <option value = "deleted" > Deleted </ option> </ select> </ div> <p /> <div id = "result" > </ div> <script> function showChanges () { document . getElementById ( "результат" ). textContent = document . getElementById ( "selectpicker" ). ценность ; } </ script> s и установите его как div, в котором вы хотите отобразить значение выбора. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="searchFilter"> <select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker"> <option value="all">All</option> <option value="published">Published</option> <option value="draft">Draft</option> <option value="in-review">In Review</option> <option value="deleted">Deleted</option> </select> </div> <p/> <div id="result"></div> <script> function showChanges(){ $('#result').text($('#selectpicker').val()); } </script>

change

JQuery:

.searchFilter

Во-первых, вы должны прикрепить changeсобытие к элементу select $('.searchFilter option:selected').text(), а затем, когда пользователь изменит, вы получите текст выбранного параметра .appendElementsи присоедините его к вашему выходному div .appendElements, например:

Предложение jQuery:

var selectElement = $('.selectpicker');

selectElement.on('change', function() {
  var selected_option_text = selectElement.find('option:selected').text();

  $('.appendElements').text(selected_option_text);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="searchFilter">
  <select class="selectpicker" data-live-search="true">
    <option value="all">All</option>
    <option value="published">Published</option>
    <option value="draft">Draft</option>
    <option value="in-review">In Review</option>
    <option value="deleted">Deleted</option>
  </select>
</div>

<br>
<div class="appendElements"></div>

Предложение VanillaJS:

var selectElement = document.querySelector('.selectpicker');

selectElement.addEventListener('change', function() {
  var selected_option_text = selectElement.selectedOptions[0].text;
  document.querySelector('.appendElements').textContent = selected_option_text;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="searchFilter">
  <select class="selectpicker" data-live-search="true">
    <option value="all">All</option>
    <option value="published">Published</option>
    <option value="draft">Draft</option>
    <option value="in-review">In Review</option>
    <option value="deleted">Deleted</option>
  </select>
</div>

<br>
<div class="appendElements"></div>