jQuery Select2插件

Question

I have a form that allows a user to enter information. It uses the select2 plugin .

On load, it is initiated to the visible form and works fine.

However, once I add a new div and run it again on all of the classes (original and added) it loses the values that were in the ones prior to adding a new one.

Is there a way to preserve this information when the plugin is run?

When you click on Add Vehicle, it inserts a new div and then runs the plugin again on the .carpool selector which is in each one of the divs.

$(".carpool").select2({
    multiple: true,
    allowClear: true,
    placeHolder: 'Agent Last name',
    minimumInputLength: 3,
    ajax: { 
        url: "jsonUser.php",
        dataType: 'json',
        allowClear: true,
        data: function (term) {
            return {
                term: term, // search term
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            return {results: data};
        }
    },
});

Answer 1

Just run the plugin on the div you're adding. You have access to that specific div , because it's the one you're appending to the DOM. So if you have something like:

newDiv = $("<div>new stuff</div");
divContainer.append(newDiv);
newDiv.select2({...});

Clearly, you need to alter the above to fit the code you've got. If you need to run the plugin on some child elements of the new div , then you'd use something like:

newDiv.find("relevant child selector").select2({...});