本文共 1744 字，大约阅读时间需要 5 分钟。

在项目中，我们需要实现房类下拉框与散客价下拉框的动态绑定。通过前端调用后端API，我们能够在房类下拉框选中具体房型后，实时获取并加载相应的散客价数据。以下是实现方法和过程的详细说明。

首先，在前端，我们设置房类下拉框的改变事件，通过获取选中房型ID来调用后端接口获取对应的散客价数据。具体实现如下：

// 初始化房类下拉框
createSelect("Abbreviation", "jianceng");
// 房类下拉框数据改变时，触发散客价下拉框数据绑定
$("#Abbreviation").change(function () {
    var roomtypeID = $("#Abbreviation").val();
    // 绑定散客价下拉框数据
    createSelect("PFITPrice", "SelectPt?RoomTypeID=" + roomtypeID);
    // 清空现有选项
    $("#PFITPrice").empty();
});

在后端，我们创建一个控制器来处理房型ID到散客价数据的映射关系。具体实现如下：

public ActionResult SelectPt(int RoomTypeID)
{
    // 获取房型ID对应的房价ID
    var priceID = (from tbRoomType in myModels.SYS_RoomType
                 where tbRoomType.RoomTypeID == RoomTypeID
                 select tbRoomType.PriceID).Single();
    
    // 获取客户价数据
    var customerPriceList = (from tbHotelRates in myModels.SYS_HotelRates
                           where tbHotelRates.PriceID == priceID
                           select new 
                           { 
                               id = tbHotelRates.PriceID, 
                               text = tbHotelRates.FITPrice
                           }).ToList();
    // 将数据格式转换为 JSON 格式
    var jsonList = Common.Tools.SetSelectJson(customerPriceList);
    
    return Json(jsonList, JsonRequestBehavior.AllowGet);
}

在数据回填的场景中，我们需要将加载的房价数据动态地设置到表单中。主要步骤包括：

$.post("SelectGBT", { RoomID: RoomID }, function (data) {
    // 同时加载房型信息
    loadDatatoForm("formfangjianxiugai", data);
    
    // 回填房类下拉框
    createSelect("RAbbreviation", "jianceng", data.RoomTypeID);
    
    // 回填散客价信息
    createSelect("RFITPrice", "SelectPt?RoomTypeID=" + data.RoomTypeID, data.PriceID);
});

需要注意的是，在处理房价数据时，我们采用了动态获取方式，避免了静态数据的直接引用。这种动态绑定方式能够保证数据的实时更新，满足用户对最新数据查询需求的要求。通过前后端的协同工作，我们实现了房型与散客价的灵活映射，提升了系统的交互体验和灵活性。

转载地址：http://kmwez.baihongyu.com/