使用 selected 和 select2 插件的相关多选下拉列表

Question

这是我在View中写的代码：

   <div class="col-lg-12" style="margin-bottom: 20px;">
    <div class="form-group">
        <label class="col-sm-3 control-label" style=" margin-top: 14px; ">Domains&nbsp;<font size="3" color="red">*</font></label>
        <br />

        <div class="col-sm-4" style="width:50%;">
            @Html.ListBoxFor(m => m.SelectedDomains, Model.AllDomains,
         new { @class = "chosen", multiple = "multiple", id = "drpDomains", style = "width: 350px;",onchange="FillDomain();" })
        </div>
    </div>
</div>




<div class="col-lg-12" style="margin-bottom: 20px;">
    <div class="form-group">
        <label class="col-sm-3 control-label" style=" margin-top: 14px; ">Domains new categories&nbsp;<font size="3" color="red">*</font></label>
        <br />

        <div class="col-sm-4" style="width:50%;">
            @Html.ListBoxFor(m => m.SelectedDomainCategories, Enumerable.Empty<SelectListItem>(),
           new { @class = "select2", multiple = "multiple", id = "multidomaincategory", style = "width: 350px;" })
        </div>
    </div>
</div>

<link href="~/Scripts/MultiSelect/chosen.css" rel="stylesheet" />

对于域，我使用了 Chosen 插件，对于类别，我使用了 select2 插件

 <script type="text/javascript">
$(".chosen-deselect").chosen({ allow_single_deselect: true });
$(".chosen").chosen().change();
$(".chosen").trigger('liszt:updated');
</script>

<script>
    function FillDomain() {
        $("#drpDomains option[value='']").removeAttr("selected");

        var selectArr = [];
        $('#drpDomains').each(function () {

            selectArr.push($(this).val());
        });
        var a = JSON.stringify(selectArr);

        var reference = this;
        $.ajax({
            url: @Url.Content("~/MyTemplate2/FillIndustry1"), //FillIndustry1 is a method in Controller
            type: "POST",
            dataType: "JSON",
            data: { Domain: a },
            success: function (DomainCategories) {

                $("#multidomaincategory").html("");

                $("#multidomaincategory").removeAttr("selected");
                var s = JSON.stringify(DomainCategories);

                var t = JSON.parse(s);

                for (var key in t) {

                    $("#multidomaincategory").append("<option value=" + t[key]["Value"] + ">" + t[key]["Text"] + "</option>");
                } 

            },
            error: function (data) {
                alert("failure error" + data);
                var t = window.JSON.parse(data.d);
                alert("failueee" + t);
            }

        });
       //I'm trying to remove all the selected items from dependent dropdown (#multidomaincategory) when all items from Domains(#drpDomains) are cleared

        if ($("#drpDomains").val() == null || $("#drpDomains").val() == "") {

            $("#multidomaincategory").removeAttr("selected");
            $("#multidomaincategory").css('display', 'none');



           }
    }
</script>

控制器：

[HttpPost]
    public ActionResult FillIndustry1(string Domain)
    {
        JArray jsonMembersArr = (JArray)JsonConvert.DeserializeObject(Domain);//convert SymptomString from json string to array

        ProfessionalTrans objprofessionaltrans = new ProfessionalTrans();
        string listdomains = "";
        foreach (var a in jsonMembersArr)
        {

            listdomains = string.Join(",", a);
        }
        var DomainCategories = objprofessionaltrans.GetDepCategories(listdomains);

        return Json(DomainCategories.ToList());
    }

数据访问层（事务）：

public IEnumerable<SelectListItem> GetDepCategories(string domains)
    {
 //GetDepCategories method - To get categories based on Domains
        PTS_CommonEntities objentity = new PTS_CommonEntities();
        List<SelectListItem> allskills = new List<SelectListItem>();

        List<GetCatListbasedDomain> catnames = objentity.usp_GetCatListBasedOnDomains(domains).ToList();

        foreach (var it in catnames)
        {
            allskills.Add(new SelectListItem { Value = it.CategoryID.ToString(), Text = it.CategoryName });

        }    

        return allskills.AsEnumerable();

}

当我清除（关闭）域中的选定项目时，相应的类别将从列表中清除，但不在文本框中

图片Before Clearing

图片After Clearing the Domains

如您所见，列表已被清除，但所选项目仍显示在 UI 中。

有人可以找出为什么在清除它们后仍然显示这些项目吗？？？

Answer 1

因为您试图清除错误的元素。 #multidomaincategory 是包含所有值的 select2 列表，有一个动态 span 类在此元素之后立即呈现到页面，查看 select2 在浏览器中生成的 html。试试：

$('#multidomaincategory').next().find('li').html('');

它们从列表中被清除，因为$("#multidomaincategory").html(""); 清除了类别列表的html，而不是文本框中呈现的文本元素。

虽然有更好的方法：$('#multidomaincategory').select2('data', null)