Q: All my dropdown have change since I am using jquery select2 I am using the jquery dropdown plugin that can be found here https://select2.org/ The problem is that all my dropdown changed and not just the two that I wanted to change. I have two dropdown that are cascading one is for the closet and the other one is for the corresponding drawer. I want select2 too modify those two and nothing else. The problem is it change all my dropdowns. How can I fix this issue. Thank you very much
Here is my jquery code.
<script>
var Select2Cascade = (function (window, $) {

    function Select2Cascade(parent, child, url, select2Options) {
        var afterActions = [];
        var options = select2Options || {};

        // Register functions to be called after cascading data loading done
        this.then = function (callback) {
            afterActions.push(callback);
            return this;
        };

        parent.select2(select2Options).on("change", function (e) {

            child.prop("disabled", false);

            var _this = this;
            $.getJSON(url.replace(':parentId:', $(this).val()), function (items) {
                var newOptions = '<option value="">-- Selecciona --</option>';
                for (var id in items) {
                    newOptions += '<option value="' + id + '">' + items[id] + '</option>';
                }
                child.select2('destroy').html(newOptions).prop("disabled", false)
                    .select2(options);

                afterActions.forEach(function (callback) {
                    callback(parent, child, items);
                });
            });
        });
    }

    return Select2Cascade;

})(window, $);

$(document).ready(function () {
    $("#btnSalvar").click(function () {
        $("#ubicacion_id").val($("#drCajon").val());
        if ($("#drOperation option:selected").text() === "-") {
            if (parseInt($("#cantidadActuel").text()) - parseInt($("#cambir_cantidad").val()) < 0) {
                alert("cantidad can not be smaller than zero");
            }
            else
            {
                alert("larger than 0");
                AddUpdate();
            }
        }
        else
        {
            //alert(parseInt($("#cantidadActuel").text()) + parseInt($("#cambir_cantidad").val()));
            AddUpdate();
        }

        function AddUpdate() {
            var modifyBy = $("#drOperation option:selected").text() + $("#cambir_cantidad").val();
            $.ajax({
                // edit to add steve's suggestion.
                type: 'POST',
                url: "/gestiondecomponentes/SalvarUbicacione",
                data: { idComponente: window.location.href.match(/[^\/]*$/), idUbicacion: $("#drCajon").val(), cantidadModifier: modifyBy },
                dataType: 'json',
                success: function (data) {
                    // your data could be a View or Json or what ever you returned in your action method
                    // parse your data here
                    alert(data);
                }
            });
        }
        //alert("The ubicaccion " + $("#drCajon").val() + " has been selected");
    });
    $.ajax({
        url: '/inventario/loadArmario',
        type: 'post',
        dataType: 'json',
        success: function (response) {

            var len = response.length;

            $("#drArmario").empty();
            $("#drArmario").append('<option value="">-- Selecciona --</option>');
            for (var i = 0; i < len; i++) {
                var id = response[i]['armario'];
                var armario = response[i]['armario'];

                $("#drArmario").append("<option value='" + id + "'>" + armario + "</option>");

            }
        }
    });
    $("#drArmario").change(function () {
        var deptid = $(this).val();

        $.ajax({
            url: '/inventario/loadCajon',
            type: 'post',
            data: { Prefix: deptid },
            dataType: 'json',
            success: function (response) {

                var len = response.length;

                $("#drCajon").empty();
                $("#drCajon").append('<option value="">-- Selecciona --</option>');
                for (var i = 0; i < len; i++) {
                    var id = response[i]['ubicacion_id'];
                    var cajon = response[i]['cajon'];

                    $("#drCajon").append("<option value='" + id + "'>" + cajon + "</option>");

                }
            }
        });
    });

    var select2Options = { width: 'resolve' };
    // Loading raw JSON files of a secret gist - https://gist.github.com/ajaxray/32c5a57fafc3f6bc4c430153d66a55f5
    var apiUrl = 'https://gist.githubusercontent.com/ajaxray/32c5a57fafc3f6bc4c430153d66a55f5/raw/260a653e6347fb6d2360e8ec376a2dc4888c1afa/:parentId:.json';

    $('select').select2(select2Options);
    var cascadLoading = new Select2Cascade($('#drArmario'), $('#drCajon'), apiUrl, select2Options);
    cascadLoading.then(function (parent, child, items) {
        for (var i = 0; i < items.length; i++) {
            alert(items[i]);
        }
        // Dump response data
        console.log(items);
    });
});


</script>

And here is the code for the two dropdown that I want to use select2 with
<div class="container" style="margin:0;">
    <form class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(x => x.armario)
            <select name="drArmario" id="drArmario" class="form-control">
                <option>--Selecciona un armario--</option>
            </select>
        </div>
        @Html.LabelFor(x => x.cajon)
        <div class="form-group">
            <select name="drCajon" id="drCajon" class="form-control">
                <option>-- Selecciona un cajon--</option>
            </select>
        </div>
    </form>
</div>


A: The only thing you'd have to modify here is your selector for the select еlements you want to conver to select2 dropdowns. Basically this part.
$('select').select2(select2Options);

What this does is apply select2 to all select elements. What you could do is add a specific class to the elements you want to convert like this:
$('select.special').select2(select2Options);

And then in your html, just do this:
<select name="drArmario" id="drArmario" class="form-control special">
    <option>--Selecciona un armario--</option>
</select>

This should convert only select.special elements to use the select2 library.
