jQuery: удалите невыбранные варианты перед добавлением новых через AJAX для Chosen JS - PullRequest
Новая
       23

jQuery: удалите невыбранные варианты перед добавлением новых через AJAX для Chosen JS

0 голосов
/ 26 мая 2019

У меня есть многоселочный вход 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)

1 Ответ

0 голосов
/ 26 мая 2019

Не с ul цикл начинается с li.

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

Попробуйте get() с not селектором, как показано ниже. Я добавляю класс result-selected к 4-му li значению, которое не отображается на консоли. 

$('#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>
...