下拉菜单按钮追加绑定动态数据图片

开发工具与关键技术： Visual Studio 2015 mvc

作者：彭水清

撰写时间：2019/7/16

当鼠标点击按钮时会出现酒菜小类（WGSmallID）数据下拉框，然后再点击下拉框里的数据会显示酒菜项目（WGItemID）数据。

利用 bootstrap 的组件中的下拉菜单来动态的绑定数据库中的数据，通过 ID 选择器选择到 wineGreensMenu。在控制器查询（小类表查询项目表，调用酒菜项目表数据），然后在 js 中请求控制器的方法，在回调函数中接收到控制器查询到的数据库的动态数据，然后写点击下拉菜单调用的方法，追加酒菜项目数据。

下拉菜单按钮追加绑定动态数据图片效果图：

点击羊肉显示的效果图如下：（测试的效果所以字段里面的内容就随意了点）

那接下来就说一下需要怎么样做才能实现上面的效果呢。

1.利用 bootstrap 的组件中的下拉菜单来动态的绑定数据库中的数据

2.通过 ID 选择器选择到 wineGreensMenu

    <div class="col-12" id="wineGreensMenu">

        <div class="cont1">

            <ul class="conten" id="wineGreensImage"></ul>

        </div>

    </div>

3.然后在 js 中请求控制器的方法，在回调函数中接收到控制器查询到的数据库的动态数据

4. 请求控制器的方法代码

/// 小类表查询项目表

public ActionResult SelectWGItem(int WGSmallID)

{

  List<WGItem> listWGItem = myModels.WGItem.Where(L => L.WGSmallID == WGSmallID).Select(L=> L).ToList();

   return Json(listWGItem, JsonRequestBehavior.AllowGet);

}

/// 调用酒菜项目表数据

public ActionResult SelectWGItem1()

{

  List<WGItem> listWGItem = myModels.WGItem.Select(L =>L).ToList();            
  return Json(listWGItem, JsonRequestBehavior.AllowGet);

    }

5.Js绑定数据的代码

//点击下拉菜单调用的方法

function selectWGSmallID(WGSmallID) {

 //清空酒菜项目数据

 $("#wineGreensImage").empty();

$.post("/Main/SelectWGItem", { WGSmallID: WGSmallID }, function (data) {

       for (var i = 0; i < data.length; i++) {

                var WGItemID = data[i].WGItemID;

                if (data[i].Discount == true) {

                    var Discount = "折扣"

                }

                else {

                    var Discount = "无折扣"

                }

//追加酒菜项目数据

$("#wineGreensImage").append('<li onclick="clickWGImage(' + WGItemID + ')">' +

                           '<ahref="javascript:;">' +

                             '<b>' + Discount + '</b>' +

                               '<img src="' + data[i].WGPicture + '" alt="">' +

                                   '<p>' + data[i].WGName + '</p>' +

                                   '<h4>¥' + data[i].WGPrice + '</h4>' +

                               '</a>' +

                            '</li>');
 } 

}

@水平有限，错误和失误在所难免，若有如何意见和建议，请不吝指正，谢谢！