Question

我想在某个Div的下拉列表中显示所选的值，我的代码如下：

<select id="SelectedItem">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<script>
$('#SelectedItem').change(function(){
    $.ajax({
        url: '@Url.Action("ajaxGetValue", "Test")',
        type: "POST",
        data: {id:$('#SelectedItem:selected').val()},
        success: function(){
            $('#ajaxDisplay').html('...');
    }
    });
});
</script>

在控制器方面我有：

   public PartialViewResult ajaxGetValue(int id)
    {
        ViewBag.str = id.ToString();
        return PartialView("Student");
    }

我想在这里显示我的结果：

<div id="ajaxDisplay">

但它没有给出任何结果

Answer 1

您的选择器应该只是元素的ID：SelectedItem（非SelectedItem：selected），例如：

$( document ).ready(function() {
  $('#ajaxDisplay').html($('#SelectedItem').val());
});

http://jsbin.com/kuheg/1/edit?html,js,output

要在每次更改选择框时更新，您都要更改我的示例以包含事件监听器：

$( document ).ready(function() {
  $('#SelectedItem').change(function() {
    $('#ajaxDisplay').html($('#SelectedItem').val());
  });
  $('#ajaxDisplay').html($('#SelectedItem').val()); //sets the HTMl from the default value
});

但是，问题是相同的，您要向服务器发送null以获取AJAX对象的data属性。另一个可能的罪魁祸首是div - 它是否有一个结束div标签？很难说清楚提供的代码。

jsbin更新。

Answer 2

你需要接受成功的结果 - 就像这样：

$('#SelectedItem').change(function(){
    $.ajax({
        url: '@Url.Action("ajaxGetValue", "Test")',
        type: "POST",
        data: {id:$('#SelectedItem:selected').val()},
    success: function(result){
        $('#ajaxDisplay').html(result);
    }
    });
});

Asp mvc5 dropdownlist ajax结果

2 个答案: