自从我使用 jquery select2 以来，我所有的下拉菜单都发生了变化

Question

我正在使用 jquery 下拉插件，可以在此处找到 https://select2.org/ 问题是我的所有下拉列表都发生了变化，而不仅仅是我想更改的两个。我有两个层叠的下拉列表，一个用于壁橱，另一个用于相应的抽屉。我想要 select2 也修改这两个而不是别的。问题是它改变了我所有的下拉菜单。我该如何解决这个问题。非常感谢

这是我的 jquery 代码。

<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>

这里是我想将 select2 与

一起使用的两个下拉菜单的代码

<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>

Answer 1

您唯一需要在此处修改的是您的 select 或要转换为 select2 下拉列表的 select 元素。基本上这部分。

$('select').select2(select2Options);

这样做是将 select2 应用于所有 select 元素。您可以做的是向要转换的元素添加特定的 class，如下所示：

$('select.special').select2(select2Options);

然后在您的 html 中，只需执行以下操作：

<select name="drArmario" id="drArmario" class="form-control special">
    <option>--Selecciona un armario--</option>
</select>

这应该只转换 select.special 个元素以使用 select2 库。

自从我使用 jquery select2 以来，我所有的下拉菜单都发生了变化

All my dropdown have change since I am using jquery select2

jquery

jquery-select2