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

Как взять текст из выбранных опций и обернуть его в div и добавить этот div в класс с классом appendElements? здесь jsfiddle https://jsfiddle.net/2w5dp7vk/14/ Я пытаюсь добавить фильтр, когда я проверяю какой-либо параметр или когда я ввожу что-то в поле ввода. Я хочу, чтобы иметь возможность принять значение из ввода или выбрать опцию и обернуть это значение в тег div и добавить его в <div class = "appendElements" > </ div> <div class = "searchFilter" > <select class = " selectpicker " data-live-search = " true " > <option value = " all " > Все </ option> <option value = "published" > Опубликовано </ option> < значение опции = "черновик" > Черновик </ option> < значение опции = "in-review" > В обзоре </ option> < значение опции = "deleted" > Deleted </ option> </ select> </ div>, когда я нажимаю кнопку «Готово».

textContent

javascript,jquery,

0

Ответов: 2


0

Вы можете получить значение выбора, когда оно <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


0

Во-первых, вы должны прикрепить 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>

JavaScript, JQuery,
Похожие вопросы