Javascript ASP局部视图下拉列表都在更改

使用ASP.Net核心MVC

该站点包含多个包含酒店的下拉列表，一旦用户选择酒店，Ajax调用将返回所选酒店的酒店房间。用户可以选择多达10个酒店+酒店房间组合，所以酒店和酒店房间的每一个下降点都是单独的部分视图。 当我从一个局部视图中选择一个酒店时，所有“酒店”下拉列表将移动到同一个酒店

我认为这是我的javascript中的一些东西，所以我注释掉了所有相关的javascript，除了呼叫获取酒店。这是我的密码：

局部视图

@model Cfv3.Models.Vacation.SelectHotelRoom
<select class="hotel-dropdown" name="hotel"></select>
<select class="hotelroom-dropdown" name="hotel"></select>

调用视图

<div class="form-horizontal">
    @for (int i = 0; i < Model.IncludedHotels.Count; i++)
    {
        @Html.Partial("_PossibleHotelRoom", Model.IncludedHotels[i])
        <hr/>  
    }
</div>

加载时，Ajax加载酒店

$.get('GetHotels', function (data) {
    //console.log(data);
    $.each(data, function (index, value) {
        //console.log(value.id + " " + value.name)
        $('<option>').val(value.id).text(value.name).appendTo('.hotel-dropdown');
    });
});

在jquery中使用

$.get('GetHotels', function (data) {
    //console.log(data);
    $.each(data, function (index, value) {
        //console.log(value.id + " " + value.name)
        $('<option>').val(value.id).text(value.name).appendTo('.hotel-dropdown').last();
    });
});

---

编辑：这只是解决当前问题的一个解决方案。我相信您会有许多基于不同需求的替代解决方案。

我终于找到了一个解决方案，它不是最干净的，但它正在工作。 在部分视图中，我从两个选择器中删除了名称，然后根据传入的模型id创建了一个id

@model Cfv3.Models.Vacation.SelectHotelRoom
@{ 
  var localhotelid = Model.Id + "hotel";
  var localhotelroomid = localhotelid + "room";
}
<select class="hotel-dropdown" id=@localhotelid></select>
<select class="hotelroom-dropdown" id="@localhotelroomid"></select>

虽然我没有要求控制第二个下拉列表，但它有一个非常类似的问题，因此我修改了ajax调用，如下所示：

$('.hotel-dropdown').click(function (e) {
    var hotelroomid = $(this).attr('id').toString().concat('room');
    $("#".concat(hotelroomid)).empty();
    $.get('GetHotelRooms', { id: $(this).val() }, function (data) {
        $.each(data, function (index, value) {
            $('<option>').val(value.id).text(value.name).appendTo("#".concat(hotelroomid));
        });
    });
});

我确信有一种更干净的方法，但它是有效的。

.appendTo'.hotel dropdown'将附加到页面上的每个匹配元素。您需要明确标识要附加到哪个。美元在什么上下文中运行？它是对页面上由特定元素触发的事件的响应吗？这样的元素可以用作使用jQuery遍历DOM的起点，以标识所需的特定下拉列表。