Question

我正在使用Jquery Select2将Multiselect与Checkbox结合使用。我想从下拉列表中删除选定的项目。我正在使用以下代码。它正在删除项目。 但是选择项目后，输入和下拉菜单之间的差距越来越大。

我的代码是 JavaScript

    using my_eCommerce.Contracts.Repositories;
    using my_eCommerce.Model;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Web;

    namespace my_eCommerce.Services
    {
        public class BasketService
        {
            IRepositoryBase<Basket> baskets;
            public const string BasketSessionName = "eCommerceBasket";
            public BasketService(IRepositoryBase<Basket> baskets)
            {
                this.baskets = baskets;
            }
            private Basket CreateNewBasket(HttpContextBase httpContext)
            {
                //create a new basket
                //
                //ffirst ceate a new cookie
                HttpCookie cookie = new HttpCookie(BasketSessionName);
                // Now create a new Basket and set the creation date
                Basket basket = new Basket();

                //basket.BasketId = Guid.NewGuid(); //basket.BasketId = Guid.NewGuid() is supposed to come after date;
                basket.Basket_Id = Guid.NewGuid();

                basket.date = DateTime.Now;

                baskets.Insert(basket);
                baskets.Commit();

                //Add basketId to a cookie
                cookie.Value = basket.Basket_Id.ToString();
                cookie.Expires = DateTime.Now.AddDays(1);
                httpContext.Response.Cookies.Add(cookie);

                return basket;
            }
            public bool AddToBasket(HttpContextBase httpContext, int product_Id, int quantity)
            {
                bool succcess = true;
                Basket basket = GetBasket(httpContext);
                //BasketItem item = basket.BasketItems.FirstOrDefault(i => i.product_Id == product_Id);
                BasketItem item = basket.BasketItems.FirstOrDefault(i => i.product_Id == product_Id);
                if (item == null)
                {
                    item = new BasketItem()
                    {
                        Basket_Id = basket.Basket_Id,
                        product_Id = product_Id,
                        Quantity = quantity
                    };
                    basket.BasketItems.Add(item);
                }
                else
                {
                    item.Quantity = item.Quantity + quantity;
                }
                baskets.Commit();

                return succcess;
            }
            public Basket GetBasket(HttpContextBase httpContext)
            {
                HttpCookie cookie = httpContext.Request.Cookies.Get(BasketSessionName);
                Basket basket;
                Guid basket_Id;

                if (cookie != null)
                {
                    if (Guid.TryParse(cookie.Value, out basket_Id))
                    {
                        basket = baskets.GetById(basket_Id);
                    }
                    else
                    {
                        basket = CreateNewBasket(httpContext);
                    }
                }
                else
                {
                    basket = CreateNewBasket(httpContext);
                }
                return basket;
            }
        }
    }

CSS

$('.js-select2'): {
            closeOnSelect: false,
            placeholder: "Placeholder",
            allowHtml: true,
            tags: true,
            allowClear: true,
            minimumResultsForSearch: -1,
        }

$("select").on("select2:select", function (evt) {
                var element = evt.params.data.element;
                var $element = $(element);
                $element.detach();
                $(this).append($element);
                $(this).trigger("change");
            });

Answer 1

试试这个

https://stackoverflow.com/a/56195248/4208247

或者这个

https://select2.org/selections#clearable-selections

可清除的选择设置为true时，会在选择值时会导致清除按钮（“x”图标）显示在“选择”框上。单击清除按钮将清除所选值，有效地将选择框重置为其占位符值。

$('select').select2({
  placeholder: 'This is my placeholder',
  allowClear: true
});

选择选项后，从下拉列表中选择2 Multi Select remove option

1 个答案: