Question

我正在显示一个名为view的表单，它有一个dropdownlist。当dropdownlist有不同的选择时，我有一个被调用的jquery：

    $(document).ready(function () {
        $("#myDropDownList").change(function () {
            $.ajax({
                url: '/Home/Forms/' + $("#myDropDownList option:selected").val(),
                type: 'GET',
                success: function (data) {
                // refresh div
                }
            });
        });
    });

以下是我的表单视图：

    @model myProject.ViewModels.PageView

    @section JavaScript
    {
       <script type="text/javascript" src="@Url.Content("/Scripts/jquery.myJQuery.js")"></script>
    }

    @Html.DropDownList("myDropDownList", Model.selectList)

    <div id="somediv">
       @Html.Label(Model.ValueThatShouldChange)
    </div>

因此，当再次调用Forms操作时，我的ViewModel中的ValueThatShouldChange将会更改，并且它们将显示在div中。这就是为什么我想刷新那个div，但我不知道该怎么做。

我尝试了$('#yourdivID').html(data)，但它将我的整个视图加载到div中。

Answer 1

最简单的方法是使用load()功能加载您需要的页面的特定部分，方法是使用 id 选择它。 E.g：

$("#yourDivId").load("/Home/Forms/ #" + $('#myDropDownList option:selected').val())

根据您构建网页的方式（您不提供该信息），您还可以通过添加参数来加载您需要的内容来更改Ajax调用。 E.g：

$(document).ready(function () {
    $("#myDropDownList").change(function () {
        $.ajax({
            url: '/Home/Forms/' + $("#myDropDownList option:selected").val(),
            data: { id : $('#myDropDownList option:selected').val() }
            type: 'GET',
            success: function (data) {
               $('div#yourDivId').html(data);
            }
        });
    });
});

在您的页面中，您只需根据 id （如果是PHP）输出您需要的内容：

<? if (isset($_POST['id'])) {
      if ($_POST['id'] == "somediv") { ?>
         <div id="somediv">Just this content should be loaded</div>
   <? }
   }
   else { ?>
     <!-- your regular html... -->
?  }   ?>

Answer 2

您可以使用

$('#yourdivID').html(data)

或

$('#yourdivID').text(data)

取决于您从通话中获得的内容

Answer 3

$(document).ready(function () {
        $("#myDropDownList").change(function () {
            $.ajax({
                url: '/Home/Forms/' + $("#myDropDownList option:selected").val(),
                type: 'GET',
                success: function (data) {
                  $("div").html(data);
                }
            });
        });
    });

Answer 4

<强> HEY。这是最小，最快的答案！： - ）

您要做的是使用jQuery快捷方式$ .load（）http://api.jquery.com/load/

$(function() {  // <-- shortcut for $(document).ready
    $("#myDropDownList").on('change', function () { 
        $('#target-div').load('/Home/Forms/' + $("#myDropDownList option:selected").val());
    });
});

其中#target-div只是目标div的CSS选择器。改变适合。

Answer 5

如果您想重新绘制div的内容，可以使用

$('#yourdivID').change();

你如何在jquery中刷新div的内容？

5 个答案: