select2 tag box не работает после загрузки через событие onclick

-1

На моей странице есть поле select, в котором используется библиотека select2. Все, что я хочу сделать, это добавить больше окна выбора после нажатия кнопки. Для этого я попытался следующий код:select2 tag box не работает после загрузки через событие onclick

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/application.css"/> 
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script> 
    </head> 
    <body> 
     <div id="location_form"> 
      <div class="form-group" style="margin-bottom: 50px;"> 
       <label for="cat" class="col-sm-1 col-sm-offset-1">Category <span class="asterisk">*</span></label> 
       <div class="col-sm-10"> 
        <select class="form-control input-transparent select2" id="cat" name="category" required="required" multiple="multiple" size="1" data-parsley-trigger="change"> 
         <option style="margin-bottom: 1px;">Select Categories</option> 
         <option value="1">Opt 1</option> 
         <option value="2">Opt 2</option> 
         <option value="3">Opt 3</option> 
         <option value="4">Opt 4</option> 
        </select> 
       </div> 
      </div>   
     </div> 
     <input type="button" id="addmore" value="Add More" /> 
     <div class="locations"></div> 

     <script src="js/action-scripts.js"></script> 
     <script> 
      //----- tag loader --// 
      $(".select2").each(function(){ 
       $(this).children().first().remove(); 
       $(this).select2({ 
        placeholder: "Select Categories", 
        maximumSelectionSize: 4 
       }); 
      }); 
     </script> 
    </body> 
</html>

Мои Остросюжетные script.js выглядит как ниже:

// Add location 2 
$('#addmore').click(function() { 

    index = Math.random(); 
    var location_div = '<div class="location" id="location_' + index + '">'; 
    location_div += $('#location_form').html(); 
    location_div += '<hr class="col-sm-offset-1"></div>'; 
    $('.locations').append(location_div); 
});

Таким образом, в основном то, что им пытаются сделать это, как только кнопка с идентификатором #addmore на моей странице HTML, я добавлю все в пределах <div id="location_form"> div до <div class="locations">.

Это работает, однако, проблема в том, что я освобождаю все функции библиотеки select2 в своих новых select-box. Вот мой jsfiddle ссылка:

https://jsfiddle.net/0cars6oy/4/

Если проверить ссылку выше jsfiddle вы увидите выберите урн, которые появляются после нажатия на кнопку Add More не работает. Неважно, что вы набираете там, он не предложит ничего из списка.

Мои знания с javascript очень ограничены. Мне трудно понять, как решить эту проблему. Буду признателен за любую оказанную помощь.

Приветствия

источник

2016-12-19 Kamrul Khan

почему мой вопрос отрицательный проголосовали? –

Вам нужно сделать 2 вещи в основном:

1) Удалить идентификатор из текущего выбора, так как вы копируете HTML непосредственно. 2) Назовите это в обработчике события нажатия кнопки, после добавления HTML

$(".select2").each(function(){ 
       $(this).children().first().remove(); 
       $(this).select2({ 
        placeholder: "Select Categories", 
        maximumSelectionSize: 4 
       }); 
      });

источник

2016-12-19 01:46:30 MoustafaS

большое спасибо за ваш ответ. Я старался в соответствии с вашей инструкцией на моей локальной машине, но, похоже, она не работала. Я скорее придумал некоторые проводные ошибки, такие как 'Неисследованная функция запроса, не определенная для Select2 s2id_autogen1'. Можете ли вы проверить, работает ли ваше предлагаемое решение в jsfiddle? –

Спасибо, это действительно сработало. У меня была эта проблема, потому что я назвал свой класс как select2. Я нашел решение для этого здесь: http://stackoverflow.com/questions/14483348/query-function-not-defined-for-select2-undefined-error –

@KamrulKhan это не проблема, я обновил вашу скрипку этим классом и его работала ... –

попробовать это ... я не могу добавить встроенный jsfiddle, потому что ваши стили очень большой jsfiddle

var index = 1; 
$('#addmore').click(function() { 
     var _html = $('#location_form').clone(false); 
    _html.find(".select2").prev('.select2-container').remove(); 
    var _id = 'location_' + index; 
    $('<div/>', { 
     class: 'location', 
     id: _id, 
     html: _html.html() + '<hr class="col-sm-offset-1"></div>', 
    }).appendTo('.locations').find('select.select2').select2({ 
     placeholder: "Select Categories", 
     maximumSelectionSize: 4 
    }); 
    index++; 
}); 


    $(".select2").children().first().remove(); 
    $(".select2").select2({ 
     placeholder: "Select Categories", 
     maximumSelectionSize: 4 
    });

источник

2016-12-19 02:45:55

select2 tag box не работает после загрузки через событие onclick

ответ

Смежные вопросы