Above image shows when user click on ">>" button item is removed from first dropdown list and added to other and when user click on "<<" the selected item is removed from second dropdown list to added into first dropdown list.
/*View of dropdown and buttons*/
@Html.Label("SubLanguage")<br />
@Html.DropDownList("SubLanguage", new List<SelectListItem> { }, new { Id = "SubLanguage" })
<input name="btnAddSubLanguage" type="button" id="btnAddSubLanguage" value=">>" />
@Html.DropDownList("SubLanguageAdded", new List<SelectListItem> { }, new { Id = "SubLanguageAdded" })
<input name="btnRemoveSubLangauage" type="button" id="btnRemoveSubLanguage" value="<<" />
<input id="subtitleRightId" type="hidden" value=@subtitleRightId name="subtitleRightId" />
<input id="hiddenSubLanguageIds" type="hidden" name="hiddenSubLanguageIds" />
/*loadSubtitles() function fills dropdown list via ajax call*/
function loadSubtitles() {
var options = {};
options.url = '@Url.Action("GetSubtitles", "Agreement")';
options.type = "POST";
options.dataType = "json";
options.contentType = "application/json";
options.success = function (subtitle) {
$("#SubLanguage").empty();
$("#SubLanguage").append("<option value=></option>");
for (var i = 0; i < subtitle.length; i++) {
$("#SubLanguage").append("<option value=" + subtitle[i].Id + ">" + subtitle[i].Name + "</option>");
}
$("#SubLanguage").prop("disabled", false);
};
options.error = function () { alert("Error retrieving Rights!"); };
$.ajax(options);
}
/*Passing dropdown item from one first to second dropdown on >> button click*/
$("#btnAddSubLanguage").off("click").on("click", function (e) {
var itemExists = false;
var txt = $("#SubLanguage").val();
e.preventDefault();
$("#SubLanguageAdded option").each(function () {
if ($(this).val() == txt) {
itemExists = true;
alert('Sub Language already exists.');
return false;
}
});
if ($('#SubLanguage').val() == null) {
alert('Sub Language list is empty.')
}
if (!itemExists) {
cutAndPaste("#SubLanguage", "#SubLanguageAdded");
}
});
/*Passing dropdown item from second to first dropdown on << button click*/
$("#btnRemoveSubLanguage").off("click").on("click", function (e) {
var itemExists = false;
var txt = $("#SubLanguageAdded").val();
e.preventDefault();
if ($("#SubLanguageAdded :selected").val() > 0) {
cutAndPaste("#SubLanguageAdded", "#SubLanguage");
}
else {
alert('Sub Language does not exists');
return false;
}
});
/*Code for adding/removing subtitles from DropDown*/
function cutAndPaste(from, to) {
$(to).append(function () {
return $(from + " option:selected").each(function () {
this.outerHTML;
}).remove();
});
}
No comments:
Post a Comment