如何在MVC中实现MultiSelect下拉列表
How to implement MultiSelect dropdown list in MVC
我正在处理一个网页,我需要在该网页上创建并填写基于所选国家/地区的州的多选下拉列表。
我正在使用这个plugin。
Html :-
@Html.DropDownListFor(m => m.CountryId, Model._CountryList, new { @class = "form-control countries", @tabindex = "12", @id = "ddlCorrCountry" })
@Html.DropDownListFor(m => m.StateIds, Model._StateList, new { @class = "form-control ms-parent multiselectmulticolumnddlstate nopadd states", @tabindex = "13", @id = "ddlCorrState" })
jQuery(更新):-
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
},
onOptgroupClick: function () {
},
onUncheckAll: function () {
},
onClose: function () {
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
try {
$('#ddlCorrState').empty();
var params = { "SId": $('#ddlCorrCountry').val(), "All": false }
$.ajax({
type: "POST",
url: "/utility/getstates",
data: JSON.stringify(params),
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
$.each(data, function () {
$('#ddlCorrState').append("<option value=" + this.Value + ">" + this.Text + "</option>");
});
makeMultiSelect();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText + ' Error:' + errorThrown);
}
});
}
catch (ex)
{ alert('EX:' + ex.message); }
}
});
在页面加载时,我看到第一张图片下方是正确的,但是 changing/selecting 任何国家/地区都完全扭曲,如图 2 所示,甚至状态下拉菜单也无法通过单击打开。
注意这里我调用了模态弹出窗口中的局部视图,TIA。
重新绑定下拉框后需要再次调用插件函数
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
//addTitle: 'Sunil',
//delimiter: ', ',
//minimumCountSelected: 3,
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onOptgroupClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onUncheckAll: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
//unSelectAll();
},
onClose: function () {
//var hdnVal = $("#<%= hdnfld.ClientID %>").val();
//if (hdnVal == "1") {
// $('#cover').show();
// $(".myhdnBtn").click();
//}
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
debugger;
$('#ddlCorrState').find('option').remove(); $('#ddlCorrState').empty();
$.ajax({
type: "post", url: "/city/getstates", data: { CountryId: $('#ddlCorrCountry').val(), IsAll: true }, datatype: "json", traditional: true, success: function (data)
{
$.each(data, function (index, value) {
$('#ddlCorrState').append('<option value="' + value.Value + '">' + value.Text + '</option>');
});
makeMultiSelect();
}
});
}
我正在处理一个网页,我需要在该网页上创建并填写基于所选国家/地区的州的多选下拉列表。
我正在使用这个plugin。
Html :-
@Html.DropDownListFor(m => m.CountryId, Model._CountryList, new { @class = "form-control countries", @tabindex = "12", @id = "ddlCorrCountry" })
@Html.DropDownListFor(m => m.StateIds, Model._StateList, new { @class = "form-control ms-parent multiselectmulticolumnddlstate nopadd states", @tabindex = "13", @id = "ddlCorrState" })
jQuery(更新):-
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
},
onOptgroupClick: function () {
},
onUncheckAll: function () {
},
onClose: function () {
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
try {
$('#ddlCorrState').empty();
var params = { "SId": $('#ddlCorrCountry').val(), "All": false }
$.ajax({
type: "POST",
url: "/utility/getstates",
data: JSON.stringify(params),
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
$.each(data, function () {
$('#ddlCorrState').append("<option value=" + this.Value + ">" + this.Text + "</option>");
});
makeMultiSelect();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText + ' Error:' + errorThrown);
}
});
}
catch (ex)
{ alert('EX:' + ex.message); }
}
});
在页面加载时,我看到第一张图片下方是正确的,但是 changing/selecting 任何国家/地区都完全扭曲,如图 2 所示,甚至状态下拉菜单也无法通过单击打开。
注意这里我调用了模态弹出窗口中的局部视图,TIA。
重新绑定下拉框后需要再次调用插件函数
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
//addTitle: 'Sunil',
//delimiter: ', ',
//minimumCountSelected: 3,
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onOptgroupClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onUncheckAll: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
//unSelectAll();
},
onClose: function () {
//var hdnVal = $("#<%= hdnfld.ClientID %>").val();
//if (hdnVal == "1") {
// $('#cover').show();
// $(".myhdnBtn").click();
//}
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
debugger;
$('#ddlCorrState').find('option').remove(); $('#ddlCorrState').empty();
$.ajax({
type: "post", url: "/city/getstates", data: { CountryId: $('#ddlCorrCountry').val(), IsAll: true }, datatype: "json", traditional: true, success: function (data)
{
$.each(data, function (index, value) {
$('#ddlCorrState').append('<option value="' + value.Value + '">' + value.Text + '</option>');
});
makeMultiSelect();
}
});
}