Remove ListBox Item if exists in another using jQuery in ASP.Net MVC

zeeshanpas
 
on Jun 16, 2022 03:19 AM
Sample_285149.zip
468 Views

Hi

I want to remove the some particular item from the ListBox which is already selected in the ListBox during edit above is my code below i attached the screen shot could you please help me in that?

There are two ListBoxes in the screen shot one is unselected ListBox (select course) other is selected ListBox (selected course)

Suppose in edit 2 times are already selected and those items should get remove from the unselected ListBox (select course)

if ($("#hdnUserID").val() != '') {
    var selectedtutorID = $("#hdnUserID").val();
    var tutcoursUrl = '@Url.Action("GetCoursetut", "Common", new { Area = "" })';
    $.ajax({
        type: "GET",
        url: tutcoursUrl,
        data: {
            'TutorID': selectedtutorID},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data != undefined && data.length > 0) {
                    $.each(data, function (i, Tutor) {
 
                        $('#ddlSelectedCourse').append('<option value=' + Tutor.Value + '>' + Tutor.Text + '</option>');
                      
                    });
                   
                }
            },
            error: function (data) {
                alert("fail");
            }                   
    });

 

<div class="form-group clearfix">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <label for="">Select  Courses</label>
                <div>
                    <a href="javascript:void(0);" id="btnMoveAllLeft" class="btn btn-default col-lg-6 col-md-6 col-sm-6 col-xs-6"><i class="glyphicon glyphicon-arrow-right"></i><i class="glyphicon glyphicon-arrow-right"></i></a>
                    <a href="javascript:void(0);" id="btnMoveLeft" class="btn btn-default col-lg-6 col-md-6 col-sm-6 col-xs-6"><i class="glyphicon glyphicon-arrow-right"></i></a>
                </div>
                
                @Html.ListBoxFor(m => m.SelectCourse, new SelectList(objCommon.GetCourse(), "CourseID", "CourseName"), new { @class = "fancy-select form-control", @id = "ddlCourse", @size = 10, @tabindex = "3" })
            </div>
            <div class="col-lg-6 col-md-6">
                <label for="">Selected  Courses</label>
                <div>
                    <a href="javascript:void(0);" id="btnMoveRight" class="btn btn-default col-lg-6 col-md-6 col-sm-6 col-xs-6"><i class="glyphicon glyphicon-arrow-left"></i></a>
                    <a href="javascript:void(0);" id="btnMoveAllRight" class="btn btn-default col-lg-6 col-md-6 col-sm-6 col-xs-6"><i class="glyphicon glyphicon-arrow-left"></i><i class="glyphicon glyphicon-arrow-left"></i></a>
                </div>
                @Html.HiddenFor(m => m.SelectedCourseIDs, new { @id = "hdnSelectedCourseIDs" })
                @Html.ListBoxFor(m => m.SelectedCourses, new SelectList(Enumerable.Empty<SelectListItem>(), "CourseID", "CourseName"), new { @class = "fancy-select form-control", @id = "ddlSelectedCourse", @size = 10, @tabindex = "4" })
            </div>
        </div>
    </div>
</div>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 18, 2022 01:32 AM
on Jun 18, 2022 01:33 AM

Hi zeeshanpas,

In order to remove the Items from first ListBox, inside the foreach loop in the you need to find the option using the Value and remove it.

Refer below example.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Model

public class CategoryModel
{
    public int[] SelectCategory { get; set; }
    public int[] SelectedItems { get; set; }
    public List<SelectListItem> Categories { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        List<Category> categories = entities.Categories.ToList();
        CategoryModel category = new CategoryModel();
        category.Categories = categories.Select(x => new SelectListItem
        {
            Text = x.CategoryName,
            Value = x.CategoryID.ToString()
        }).ToList();
        return View(category);
    }

    public JsonResult GetCategories()
    {
        // Get the List from database.
        List<SelectListItem> categories = new List<SelectListItem>();
        categories.Add(new SelectListItem { Text = "Condiments", Value = "2" });
        categories.Add(new SelectListItem { Text = "Grains/Cereals", Value = "5" });

        return Json(categories, JsonRequestBehavior.AllowGet);
    }
}

View

@model ListBox_Item_Remove.Models.CategoryModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "GET",
                url: "@Url.Action("GetCategories", "Home")",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data != undefined && data.length > 0) {
                        $.each(data, function (i, item) {
                            $('#ddlSelectedCategories').append('<option value=' + item.Value + '>' + item.Text + '</option>');
                            // Remove items from 1st ListBox.
                            $("#ddlCategories option[value='" + item.Value + "']").remove();
                        });
                    }
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        });
    </script>
</head>
<body>
    @Html.ListBoxFor(m => m.SelectCategory, Model.Categories, new { @id = "ddlCategories", @size = 10 })&nbsp;&nbsp;&nbsp;&nbsp;
    @Html.ListBoxFor(m => m.SelectedItems, new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), new { @id = "ddlSelectedCategories", @size = 10 })
</body>
</html>

Screenshot

In this example i am calling jQuery Ajax on page load. So you need to call in the edit event.