Pages

Showing posts with label Cut and Paste item from one dropdown to other using Jquery. Show all posts
Showing posts with label Cut and Paste item from one dropdown to other using Jquery. Show all posts

Wednesday, 12 March 2014

Passing item from one dropdown list to other dropdown list using Jquery



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="&gt;&gt;" />

@Html.DropDownList("SubLanguageAdded", new List<SelectListItem> { }, new { Id = "SubLanguageAdded" })

  <input name="btnRemoveSubLangauage" type="button" id="btnRemoveSubLanguage" value="&lt;&lt;" />
                 
    <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();
        });
    }