在我的订单模块中，我有三个所有产品的下拉列表。
第一个大小的下拉列表。 （如果用户未选择值，则不会显示第二个和第三个下拉列表）
第二个颜色下拉列表：如果用户从下拉列表中选择一个尺寸，则会出现第二个下拉列表。但我不想展示所有的颜色。我只想显示所选产品尺寸的颜色。
最后，数量的第三个下拉列表。用户将选择数量并将其发送到购物车。
我是jquery ajax的初学者，需要你的帮助。
这是我的模型视图：
public class ColorForOrder
{
public List<ColorFromVariationVM> colorlist { get; set; }
}
第二个VM：
public class ColorFromVariationVM
{
public int ID { get; set; }
public string Color { get; set; }
public int? ColorQuantity { get; set; }
}
我的观点：
<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>
我的剧本：
<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>
最后我的控制员：
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;
}
答案 0 :(得分：0)
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);
}