jQuery：在通过 AJAX 为 Chosen JS 添加新选项之前删除未选择的选项

Question

我有我的 ChosenJS 多选输入，我通过 AJAX 动态获取选项：

  $("#offer_tags").chosen({
    max_selected_options: 30,
    max_shown_results: 30,
  });

  $("#offer_tags_chosen input").autocomplete({
      minLength: 3,
      source: function( request, response ) {
          $.ajax({
              url: "/common/offer_tags?search="+request.term,
              dataType: "json",
              beforeSend: function(){}
          }).done(function( data ) {
                  response(
                    $('#offer_tags_chosen ul.chosen-results').each(function () {
                      console.log(this);
                    }),
                    $('#offer_tags').append('<option>' + request.term + '</option>'),

                    $.map( data, function( item ) {
                      $('#offer_tags').append('<option value='+ item.id +'>' + item.name + '</option>');
                    })
                  );
                  $("#offer_tags").trigger("chosen:updated");
          });

      }
  });

目前看起来一切正常，但是我想在添加新选项之前删除未选择的选项。

到目前为止，我的想法是访问ul.chosen-results，然后删除所有li.active-results

有了这段代码

$('#offer_tags_chosen ul.chosen-results').each(function () {
  console.log(this);
})

我可以在我的控制台中获得ul.chosen-results：

<ul class="chosen-results">
  <li class="active-result" data-option-array-index="0" style="">myvalue</li>
  <li class="active-result" data-option-array-index="1" style="">othervalue</li>
  <li class="active-result" data-option-array-index="2" style="">thirdvalue</li>
</ul>

但是，当我尝试通过以下方式访问 children 时：

$('#offer_tags_chosen ul.chosen-results').each(function () {
  console.log($(this).children());
})

它给了我这个：

w.fn.init [li.no-results, prevObject: w.fn.init(1)]
0: li.no-results
length: 1
prevObject: w.fn.init [ul.chosen-results]
__proto__: Object(0)

请问我做错了吗？如何在附加新选项之前删除未选择的选项？我需要保留选定的选项 - 不删除。

更新

我的 HTML 如下所示：

<div class="chosen-container chosen-container-multi" style="width: 936px;"
      title="" id="offer_tags_chosen">
  <ul class="chosen-choices">
    <li class="search-field">
      <input type="text" value="Please, select (multiple allowed)"
             class="default ui-autocomplete-input" autocomplete="off"
             style="width: 215.387px;">
    </li>
  </ul>
  <div class="chosen-drop">
    <ul class="chosen-results">
      <li class="active-result" data-option-array-index="0" style="">myvalue</li>
      <li class="active-result" data-option-array-index="1" style="">othervalue</li>
      <li class="active-result" data-option-array-index="2" style="">thirdvalue</li>
    </ul>
  </div>
</div>

console.log($(this).children().get()); 给我：

[li.no-results]
0: li.no-results
length: 1
__proto__: Array(0)

Answer 1

不是从ul循环从li开始的。

$('#offer_tags_chosen ul.chosen-results li'.

尝试使用get() 和not 选择器，如下所示。我在第 4 个 li 值上添加了类 result-selected，该值未出现在控制台上。

$('#offer_tags_chosen ul.chosen-results li').not('.result-selected').each(function() {
  console.log($(this).get());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="chosen-container chosen-container-multi" style="width: 936px;" title="" id="offer_tags_chosen">
  <ul class="chosen-choices">
    <li class="search-field">
      <input type="text" value="Please, select (multiple allowed)" class="default ui-autocomplete-input" autocomplete="off" style="width: 215.387px;">
    </li>
  </ul>
  <div class="chosen-drop">
    <ul class="chosen-results">

      <li class="active-result" data-option-array-index="0" style="">Select</li>
      <li class="active-result" data-option-array-index="1" style="">othervalue</li>
      <li class="active-result" data-option-array-index="2" style="">thirdvalue</li>
      <li class="active-result result-selected" data-option-array-index="4" style="">4thvalue</li>
    </ul>
  </div>
</div>