使用选定和选择2插件的依赖多选下拉列表
Dependent multiselect dropdown using chosen and select2 plugins
这是我在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 <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 <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)
相关文章:
- 如何在Angular2中使用jQuery插件
- 在 webpack 中管理 jQuery 插件依赖关系
- jasmine-maven插件加载源文件及其依赖关系
- 避免使用同时具有css和js依赖关系的插件进行渲染阻塞
- 使用选定和选择2插件的依赖多选下拉列表
- 设计模式以实现依赖于其他插件的插件
- 在 Webpack 插件中添加依赖关系
- jQuery插件使用Backbone.js和require.js - 如何将“this”变量传递给依赖项
- 节点中的 RequireJS 因使用插件的依赖项(例如使用.js)而失败
- 插件之间的依赖关系?在创建插件之前调用方法
- 只有在需要AngularJS时才注入模块依赖项(如插件)
- 推迟或暂停敲除中的依赖项评估,直到视图模型完全更新(例如使用映射插件)
- jasmine-maven插件:管理依赖关系和单独的规范执行
- 使用ocLazyLoad插件加载组件和其他依赖项
- 不依赖于URL的浏览器插件的本地存储
- 在Heroku上使用基于插件的架构的应用程序中,我应该如何处理节点模块依赖关系
- 需要多个依赖的非模块jquery插件,如jquery-ui和jqGrid
- 当用户指定-DskipTests=true时,不希望运行maven依赖插件
- 用需求和其他依赖关系实现domready插件
- 是否有任何JavaScript网格插件没有框架依赖