Все мои выпадающие меню изменились, так как я использую jquery select2 - PullRequest
Новая
       95

Все мои выпадающие меню изменились, так как я использую jquery select2

0 голосов
/ 19 июня 2020

Я использую плагин раскрывающегося списка 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>

1 Ответ

1 голос
/ 19 июня 2020

Единственное, что вам нужно здесь изменить, это ваш селектор для select элементов, которые вы хотите преобразовать в выпадающие списки select2. В основном эта часть. 

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

Это применяет select2 ко всем элементам select. Что вы можете сделать, так это добавить определенный класс c к элементам, которые вы хотите преобразовать следующим образом: 

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

А затем в вашем html просто сделайте это: 

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

Это должно преобразовать только select.special элементы для использования библиотеки select2.

...