如何在多个字段中添加select2

Question

我有一个添加病历的表格，在医学的输入部分，用户可以输入1个以上的药物，所以我按一个按钮在该表格中动态添加多个字段，我使用jquery.multifield.js。

在该字段中，我有rendercomponent.splice(index, 1); <select>来选择药品名称。在开始之前点击按钮（按钮添加字段）select2工作正常，但是如果我点击按钮，它们会显示字段，但我无法点击<select>。这是我的代码。希望有人可以帮助我。

javascript看起来像这样。

<select>

jquery.multifield.js。

<script src="<?=base_url('_assets/js/jquery.multifield.js')?>"></script>
<script src="<?=base_url('_assets/js/select2.min.js')?>"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.form-content').multifield({
            section: '.group',
            btnAdd:'#btnAdd',
            btnRemove:'.btnRemove',
        });
        $('.js-example-basic-single').select2({
          placeholder: 'Choose Medicine'
        });
    });
</script>

我创建的表单。

/**
 * jQuery Multifield plugin
 *
 * https://github.com/maxkostinevich/jquery-multifield
 */


// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

    /*
     * Plugin Options
     * section (string) -  selector of the section which is located inside of the parent wrapper
     * max (int) - Maximum sections
     * btnAdd (string) - selector of the "Add section" button - can be located everywhere on the page
     * btnRemove (string) - selector of the "Remove section" button - should be located INSIDE of the "section"
     * locale (string) - language to use, default is english
     */

    // our plugin constructor
    var multiField = function( elem, options ){
        this.elem = elem;
        this.$elem = $(elem);
        this.options = options;
        // Localization
        this.localize_i18n={
        "multiField": {
          "messages": {
            "removeConfirmation": "Are You Sure Want To Delete Medicine?"
          }
        }
      };

        // This next line takes advantage of HTML5 data attributes
        // to support customization of the plugin on a per-element
        // basis. For example,
        // <div class=item' data-mfield-options='{"section":".group"}'></div>
        this.metadata = this.$elem.data( 'mfield-options' );
    };

    // the plugin prototype
    multiField.prototype = {

        defaults: {
            max: 0,
            locale: 'default'
        },


        init: function() {
            var $this = this; //Plugin object
            // Introduce defaults that can be extended either
            // globally or using an object literal.
            this.config = $.extend({}, this.defaults, this.options,
                this.metadata);

            // Load localization object
      if(this.config.locale !== 'default'){
            $this.localize_i18n = this.config.locale;
      }

            // Hide 'Remove' buttons if only one section exists
            if(this.getSectionsCount()<2) {
                $(this.config.btnRemove, this.$elem).hide();
            }

            // Add section
            this.$elem.on('click',this.config.btnAdd,function(e){
                e.preventDefault();
                $this.cloneSection();
            });

            // Remove section
            this.$elem.on('click',this.config.btnRemove,function(e){
                e.preventDefault();
                var currentSection=$(e.target.closest($this.config.section));
                $this.removeSection(currentSection);
            });

            return this;
        },


        /*
         * Add new section
         */
        cloneSection : function() {
            // Allow to add only allowed max count of sections
            if((this.config.max!==0)&&(this.getSectionsCount()+1)>this.config.max){
                return false;
            }

            // Clone last section
            var newChild = $(this.config.section, this.$elem).last().clone().attr('id', '').fadeIn('fast');


            // Clear input values
            $('input[type!="radio"],textarea', newChild).each(function () {
                $(this).val('');
            });

            // Fix radio buttons: update name [i] to [i+1]
            newChild.find('input[type="radio"]').each(function(){var name=$(this).attr('name');$(this).attr('name',name.replace(/([0-9]+)/g,1*(name.match(/([0-9]+)/g))+1));});
            // Reset radio button selection
            $('input[type=radio]',newChild).attr('checked', false);

            // Clear images src with reset-image-src class
            $('img.reset-image-src', newChild).each(function () {
                $(this).attr('src', '');
            });

            // Append new section
            this.$elem.append(newChild);


            // Show 'remove' button
            $(this.config.btnRemove, this.$elem).show();
        },

        /*
         * Remove existing section
         */
        removeSection : function(section){
            if (confirm(this.localize_i18n.multiField.messages.removeConfirmation)){
                var sectionsCount = this.getSectionsCount();

                if(sectionsCount<=2){
                    $(this.config.btnRemove,this.$elem).hide();
                }
                section.slideUp('fast', function () {$(this).detach();});
            }
        },

        /*
         * Get sections count
         */
        getSectionsCount: function(){
            return this.$elem.children(this.config.section).length;
        }

    };

    multiField.defaults = multiField.prototype.defaults;

    $.fn.multifield = function(options) {
        return this.each(function() {
            new multiField(this, options).init();
        });
    };



})( jQuery, window, document );