Pages

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();
        });
    }

No comments:

Post a Comment