Question

如何从选定的选项中获取文本并将其包装到div中，然后将该div附加到具有类appendElements的div中？这是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>

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

Answer 2

您可以在选择更改时获取选择的值，并将其设置为要在其中显示选择值的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>

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

2 个答案: