使用选定和选择2插件的依赖多选下拉列表

Dependent multiselect dropdown using chosen and select2 plugins

本文关键字:依赖 插件 下拉列表 选择      更新时间:2023-09-26

这是我在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" />
对于域,我使用了选择插件,

对于类别,我使用了 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();

}

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

清除前的图像

清除域后的图像

如您所见,列表正在清除,但所选项目仍显示在 UI 中。

有人可以找出为什么即使在清除项目后仍会显示这些项目吗???

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

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

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

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