How to pass Model List from Controller to View with Jquery or Javascript

Question

In my order module, I have three dropdownlist for all products.

First dropdownlist for size. (If user not select a value, second and third dropdown not appear)

Second dropdownlist for color: If user select a size from dropdownlist, second dropdown is appear. But I don't want to show all of colors. I want to show only the colors of the selected product size.

And lastly, third dropdown list for quantity. User will select quantity and send it to cart.

I am beginner in jquery ajax and need for your help.

Here is my Model Views:

public class ColorForOrder
{
   public List<ColorFromVariationVM> colorlist { get; set; }
}

And second VM:

public class ColorFromVariationVM
    {
        public int ID { get; set; }
        public string Color { get; set; }
        public int? ColorQuantity { get; set; }
    }

My View:

<table id="example1" class="table table-bordered dt-responsive nowrap table-striped">
            <thead>
                <tr>
                    <th width="20%">Product Name</th>
                    <th width="30%">Size( Height - Width - Sections )</th>
                    <th width="20%">Color</th>
                    <th width="10%">Quantity</th>
                    <th width="20%">Transaction</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.ProductName</td>
                        <td>
                            <div class="form-group" style="width: 100%;">
                                @*@Html.DropDownListFor(x => item.SizeId, new SelectList(item.ProductSizeList, "ID", "SizeForOrder"),"Select Size", new { @class = "form-control select2",@style="width:100%", @placeholder = "" })
                                    <span class="text-danger">@Html.ValidationMessageFor(x => item.SizeId)</span>*@

                                <select id="select-size-@item.ID" class="form-control select2" style="width: 100%;">
                                    <option selected="selected" disabled="disabled">Size</option>
                                    @foreach (var size in item.ProductSizeList)
                                    {
                                        if (size.Quantity == null || size.Quantity == 0)
                                        {
                                            <option disabled="disabled">@size.SizeForOrder (Out of Stock)</option>
                                        }
                                        else
                                        {
                                            <option>@size.SizeForOrder</option>
                                        }

                                    }
                                </select>
                            </div>
                        </td>
                        <td>
                            <div id="color-@item.ID" class="form-group" style="width: 100%;">
                                @*<select class="form-control select2" style="width: 100%;">
                                        <option selected="selected" disabled="disabled">Color</option>
                                        <option>TXB</option>
                                        <option>TXW</option>
                                        <option>TXG</option>
                                        <option>MATT</option>
                                        <option>BRUSHED</option>
                                        <option>POLISHED</option>
                                    </select>*@
                            </div>
                        </td>
                        <td>
                            <div id="quantity-@item.ID" class="form-group" style="width: 100%;">
                                @*<select class="form-control select2" style="width: 100%;">
                                        <option selected="selected" disabled="disabled">QTY</option>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                        <option>7</option>
                                    </select>*@
                            </div>
                        </td>
                        <td>
                            @*  <a href="@Url.Action("EditProduct", "Product", new { id = item.ID })" id="add-basket-@item.ID" class="btn btn-primary btn-sm" title="Edit"><i class="fa fa-fw fa-cart-plus"></i> Add to Basket</a>*@
                            @*<a href="@Url.Action("VariationList", "Variation", new { id = item.ID, p=item.ProductName })" class="btn btn-primary btn-xs" title="Variation"><i class="icon-sitemap"></i></a>*@
                            @* <a href="@Url.Action("Delete","Product", new { id = item.ID })" onclick="return confirm('Are you sure you want to delete this product with all variations?')" class="btn btn-danger btn-xs" title="Delete"><i class="icon-remove"></i></a>*@
                        </td>

                    </tr>
                }

            </tbody>
            <tfoot>
                <tr>
                    <th>Product Name</th>
                    <th>Size (Height-Width-Sections)</th>
                    <th>Color</th>
                    <th>Quantity</th>
                    <th>Transaction</th>
                </tr>
            </tfoot>
        </table>

My Script:

<script>

    $(document).ready(function () {

        @foreach (var item in Model)
        {
          <text>
        $('select#select-size-@(item.ID)').change(function() {

            var id = $(this).data("id");
            var link = "/Order/GetColorFromSize/" + @item.ID;
            var a = $(this);
            $.ajax({
                type: "GET",
                url: link,
                success: function(result) {

                    $("div#color-@(item.ID)").html('<select class="form-control select2" style="width: 100%;">' + 
                        $.each(result,function(index,value)
                        { 
                            $.each(value[0],function(indexx,valuee)
                            { 
                                '<option>'+valuee[1]+'</option>'
                            }) 
                        }) 
                        + '</select>');
                }
            });
        });
        </text>
            }
        });
</script>

And lastly my controller:

public List<Models.DTO.OrderDTO.ColorForOrder> GetColorFromSize(int id)
        {
            List<Models.DTO.OrderDTO.ColorForOrder> colormodel = rpvariation.Where(x => x.Id == id).Select(a => new Models.DTO.OrderDTO.ColorForOrder()
            {
                colorlist = a.OwnerProduct.Colors.Select(b => new Models.DTO.OrderDTO.ColorFromVariationVM()
                {
                    ID = b.Id,
                    Color = b.Color.ColorName,
                    ColorQuantity = b.Product.Variations.Sum(x => x.Stock.TXB)
                }).ToList()
            }).ToList();

            return colormodel;

        }

Answer 1

public ActionResult GetColorFromSize(int id)
{
    var colormodel = rpvariation
        .Where(x => x.Id == id)
        .Select(a => new Models.DTO.OrderDTO.ColorForOrder()
        {
            colorlist = a.OwnerProduct.Colors.Select(b => new Models.DTO.OrderDTO.ColorFromVariationVM()
            {
                ID = b.Id,
                Color = b.Color.ColorName,
                ColorQuantity = b.Product.Variations.Sum(x => x.Stock.TXB)
            }).ToList()
        }).ToList();

    return Json(colormodel, JsonRequestBehaviour.AllowGet);
}