Выбранный jquery не работает на восстановленном контенте - PullRequest
Новая
       15

Выбранный jquery не работает на восстановленном контенте

0 голосов
/ 13 сентября 2018

Я генерирую содержимое на моем <select> через ajax.В первый раз, когда <option> s загружается через ajax - все хорошо и выбран правильно запускается, даже если в этом <select> был предварительно загруженный контент.но если я сгенерирую <option> sa во второй раз - меня не выберут для стрельбы.

Вот jsfiddle, чтобы показать вам, что я имею в виду: https://jsfiddle.net/kneidels/vrp0gz1c/

Hit GO с первого раза - все хорошо.Но нажмите его снова, и выбор вернется к старому неотобранному стилю.

Может ли кто-нибудь помочь мне «перезагрузить» плагин, чтобы он работал корректно КАЖДОЕ время?

Использование выбранной версии: 1.87

Ответы [ 4 ]

0 голосов
/ 23 сентября 2018

Проблема в вашем приложении в этой строке кода: 

$('#myselect_chosen').remove();

Фактически после первого запуска функции щелчка вы удаляете опции Multi select вместо того, чтобы покоиться, так что выбранный не будет работать послечто.

если вы прочитаете выбранный плагин jQuery Документация на github, вы найдете этот простой способ исправить вашу проблему и сбрасывать выбранный плагин каждый раз, когда вы его запускаете:

  • Уничтожение избранных

Чтобы уничтожить Избранных и вернуться к нативному выбору:

$("#form_field").chosen("destroy");

Теперь ваш javascriptкод должен быть: 

  $("#trigger").click(function(){
        $("#myselect").show().html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
        $('#myselect').chosen("destroy");
        $("#myselect").chosen({rtl: true, allow_single_deselect: true});    
    })

вы можете попробовать его с здесь .

0 голосов
/ 23 сентября 2018

Можете ли вы попробовать следующее? 

$("#trigger").click(function(){
  var Select = $('#myselect');
  Select.find('option').remove().end();
  Select.append('<option value="1">1</option>');
  Select.append('<option value="2">2</option>');
  Select.append('<option value="3">3</option>');
  Select.append('<option value="4">4</option>');
  Select.val('').trigger('chosen:updated');
  Select.chosen({rtl: true, allow_single_deselect: true});	
})
@import url("https://harvesthq.github.io/chosen/chosen.css");
#myselect {
  width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>

<select id="myselect" multiple="multiple" size="3">
</select>

<br><br><br><a href="javascript:;" id="trigger">Go</a>
0 голосов
/ 23 сентября 2018

версия jQuery является фактическим виновником здесь - и нет необходимости уничтожать предыдущий экземпляр.

это работает так, с более поздними версиями jQuery: 

var vals = ...; //read old selected options values, add new ones
$(select).val(vals);
$(select).trigger("chosen:updated");
0 голосов
/ 19 сентября 2018

Измените свой код с: 

$("#trigger").click(function(){
    $("#myselect").show().html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
    $('#myselect_chosen').remove();
    $("#myselect").chosen({rtl: true, allow_single_deselect: true});    
})

до: 

$("#trigger").click(function(){
    let $mySelect = $("#myselect");

  // Make sure previous instantiations have been cleaned-up.
    $mySelect.chosen("destroy");
    $mySelect.html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
    $mySelect.chosen({rtl: true, allow_single_deselect: true});
})

Вы можете видеть это рабочее здесь , т.е. последующие нажатия «Go» теперь приводят к тому, что выбранный компонент отображается правильно.

Вы не нуждались в вызове show () (который просто отображает элемент), и ваш оператор удаления сделал недействительным созданный экземпляр выбранного объекта.

...