ASP局部視圖下拉菜單都在改變

該網站包含含酒店，一旦用戶選擇酒店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>

在負載阿賈克斯加載酒店

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'); 
    }); 
});

來源

2017-07-18 user2502794

'.appendTo（'。hotel-dropdown'）'將附加到頁面上的每個*匹配元素。你需要明確指出你想追加哪一個。在'$ .get（）'運行的上下文中？它是否響應由特定元素觸發的頁面上的某個事件？這樣的元素可以作爲一個起點，用jQuery遍歷DOM來確定你想要的特定下拉列表。 – David

利用last()。

$.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(); 
    }); 
});

編輯：這僅僅是一個解決方案來解決當前的問題。我相信你會根據不同的要求有很多備用解決方案。

來源

2017-07-19 06:24:33

我終於找到了一個解決方案，它不是最乾淨的，但它工作。在部分視圖中，我從兩個選擇器中刪除了名稱，然後根據傳入的模型ID創建一個ID。

@model Cfv3.Models.Vacation.SelectHotelRoom 
@{ 
    var localhotelid = Model.Id + "hotel"; 
    var localhotelroomid = localhotelid + "room"; 
} 
<select class="hotel-dropdown" [email protected]></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)); 
     }); 
    }); 
});

我敢肯定有一個更清潔的方式，但它的工作原理。

來源

2017-07-19 10:07:46 user2502794

ASP局部視圖下拉菜單都在改變

回答

相關問題