取值并从输入字段创建过滤器？答案

【问题标题】：Take the value and create filter from input field?取值并从输入字段创建过滤器？
【发布时间】：2018-07-30 18:07:44
【问题描述】：

如何从选定的选项中获取文本并将其包装到 div 并将该 div 附加到具有类 appendElements 的那个？这是 jsfiddle https://jsfiddle.net/2w5dp7vk/14/ 当我检查某些选项或在输入字段中键入内容时，我正在尝试添加过滤器。我希望能够从输入或选择选项中获取值并将该值包装到 div 标记中，并在我单击完成按钮时将其附加到 .appendElements 上。

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

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

【问题讨论】：

如果提问者没有展示任何代码、想法或尝试来实现他所要求的内容，为什么这个问题会得到支持？
这里是 jsfiddle jsfiddle.net/2w5dp7vk/7 当我检查某些选项或在输入字段中输入内容时，我正在尝试添加过滤器。我希望能够从输入或选择选项中获取值并将该值包装到 div 标签中并将其附加到 .selected-filters 上。
将其作为编辑添加到问题中

标签： javascript jquery

【解决方案1】：

首先，您必须将change 事件附加到您的选择元素.searchFilter，然后当用户更改时，您必须使用$('.searchFilter option:selected').text() 获取所选选项的文本并将其附加到您的输出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>

【讨论】：

@denis-omerovic 这能回答你的问题吗？

【解决方案2】：

可以在select发生变化时获取select的值，并将其设置为要在其中显示select值的div的textContent。

<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(){
  document.getElementById("result").textContent = document.getElementById("selectpicker").value;
}
</script>

jQuery：

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

【讨论】：