0

这是我的 JavaScript：

<script type="text/javascript">
    $(function () {
        $("select#City_DDL_ID").change(function (evt) {
            if ($("select#City_DDL_ID").val() != "-1") {
                $.ajax({
                    url: "/Home/GetHotels",
                    type: 'POST',
                    dataType: "json",
                    data: { id: $("select#City_DDL_ID").val() },
                    success: function (response) {
//                        $('#Hotel_DDL_ID').attr('disabled', false);
                        $("select#Hotel_DDL_ID").replaceWith(response);
                    },
                    error: function (xhr) {
                        alert("Something went wrong, pleae try again");
                    }
                });
            }
        });
    });

这是 Index.cshtml：

@model RoomReservation.Webb.Models.HomeViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<fieldset>
    <legend>Select a city and a hotel</legend>
    <br />
    <br />
    <br />
    @Html.DropDownListFor(x=>x.City_DDL_ID, new SelectList(Model.AllCities, "Value", "Text"),"...pick a city..." )
    <br />
    <br />
    @Html.DropDownListFor(x => x.Hotel_DDL_ID, Enumerable.Empty<SelectListItem>(), "...pick a hotel...", new { disabled = "disabled"})
    <br />
    <br />
</

fieldset>

这是ajax调用的方法：

public JsonResult GetHotels(int id) 
{
   if (id > 0)
   {
      var hotels = bl.ReturnAllHotelsInCity(id);
      return Json(hotels);
   }
   else
   {
      throw new Exception("Hotel not reachable, please try again");
   }
}

在 City_DDL_ID 中选择城市后，我的 Hotel_DDL_ID 消失。你能帮帮我吗，我是 javasrcipt 和 ajax 的新手？

这是 newset 脚本，但仍然无法正常工作：

<script type="text/javascript" language="javascript">
    $('#City_DDL_ID').change(function () {
        var selectedCity = $(this).val();
        if (selectedCity != null && selectedCity != '-1') {
            $.getJSON('@Url.Action("GetHotels")', { id: selectedCity }, function (hotels) {
                var hotelsSelect = $('#Hotel_DDL_ID');
                hotelsSelect.empty();
                $.each(hotels, function (index, hotel) {
                    hotelsSelect.append($('<option/>',
                    {
                        value: hotel.Value,
                        text: hotel.Text
                    }));
                });
                $('#Hotel_DDL_ID').attr('disabled', false);
            });
        }
    });
</script>

那么该怎么办？

谢谢大家的帮助，我的这个最新脚本正在运行，我将默认浏览器更改为 Chrome。再次感谢大家 干杯

PS 管理员：如何将问题标记为已回答？

4

2 回答 2

0

$("select#Hotel_DDL_ID"). 替换（响应）；

replaceWith 说明了一切，它用新内容替换了内容。

如果您只想更改 [Hotel_DDL_ID] 的内容/值，您需要评估（不意味着使用 eval()！）响应并相应地更新选项

于 2012-11-01T00:54:29.037 回答
0

您正在从您的方法返回 JSON，然后替换select#Hotel_DDL_ID为该 JSON。这意味着您的选择列表将被浏览器不会呈现的 JSON 字符串替换。

$("select#Hotel_DDL_ID").replaceWith(response);

response在这种情况下是 JSON 对象，而不是 HTMLselect元素

您需要解析 JSON 并使用内容重新填充选择列表，查看此问题的已接受答案以查看示例

也许是这样的：

var html = '';
var len = response.length;
for (var i = 0; i< len; i++) {
    html += '<option value="' + response[i].Value+ '">' + response[i].Text+ '</option>';
}
$("select#Hotel_DDL_ID").html(html);

或者，您可以修改操作以返回将选择列表呈现为 HTML 的局部视图，然后您的代码将起作用

于 2012-11-01T00:42:49.293 回答